[javascript] ‘블러’이벤트가 발생하면 어떤 요소 포커스가 *로 * 이동했는지 어떻게 알 수 있습니까?

흠 … Firefox에서는 explicitOriginalTarget클릭 한 요소를 끌어 오는 데 사용할 수 있습니다 . toElementIE에서도 똑같이 할 것으로 예상 했지만 작동하지 않는 것 같습니다 …하지만 문서에서 새로 초점을 맞춘 요소를 가져올 수 있습니다.

function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value =
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

주의해야 할 점은 : 이 기술은 않습니다 하지 초점을위한 작업으로 인한 변경됩니다 탭 이동 키보드를 사용하여 필드를 통해, 그리고 크롬이나 사파리에서 전혀 일을하지 않습니다. 사용하는 데 큰 문제 activeElement(IE를 제외하고는)가 지속적으로 될 때까지 갱신되지 않는다는 후blur 이벤트가 처리되고, 처리 기간 동안 전혀 유효한 값을 갖지 않을 수! 이것은 Michiel이 다음을 사용하여 끝내는 기술 의 변형으로 완화 될 수 있습니다 .

function showBlur(ev)
{
  // Use timeout to delay examination of activeElement until after blur/focus 
  // events have been processed.
  setTimeout(function()
  {
    var target = document.activeElement;
    document.getElementById("focused").value =
      target ? target.id||target.tagName||target : '';
  }, 1);
}

이것은 대부분의 최신 브라우저 (Chrome, IE 및 Firefox에서 테스트 됨)에서 작동하며 Chrome은 클릭 한 버튼 (탭 대 탭) 에 초점을 맞추지 않는다는 경고가 있습니다.

답변

function blurListener(event) {
  event.target.className = 'blurred';
  if(event.relatedTarget)
    event.relatedTarget.className = 'focused';
}
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

.blurred { background: orange }
.focused { background: lime }

<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />

<input id="myInput" onblur="setTimeout(function() {alert(clickSrc);},200);"></input>
<span onclick="clickSrc='mySpan';" id="mySpan">Hello World</span>

$(document).mousedown(function(){
  if ($(event.target).attr("id") == "mySpan") {
    // some process
  }
});

Autocompleter.Base.prototype.onBlur = Autocompleter.Base.prototype.onBlur.wrap(
        function(origfunc, ev) {
            if ($(this.options.ignoreBlurEventElement)) {
                var newTargetElement = (ev.explicitOriginalTarget.nodeType == 3 ? ev.explicitOriginalTarget.parentNode : ev.explicitOriginalTarget);
                if (!newTargetElement.descendantOf($(this.options.ignoreBlurEventElement))) {
                    return origfunc(ev);
                }
            }
        }
    );

<input id="myInput" onblur="lastBlurred=this;"></input>

<span id="mySpan" onClick="function(lastBlurred, this);">Hello World</span>