Когда происходит событие «размытия», как я могу узнать, на какой фокус элемента * направлено *?

Question

Предположим, я прикрепил функцию blur к полю ввода HTML, например:

<input id="myInput" onblur="function() { ... }"></input>

Есть ли способ получить идентификатор элемента, который вызвал событие blur (элемент, по которому щелкнули) внутри функции? Как?

Например, предположим, что у меня есть такой промежуток:

<span id="mySpan">Hello World</span>

Если я щелкну промежуток сразу после того, как элемент ввода будет в фокусе, элемент ввода потеряет фокус. Как функция узнает, что на нее нажали mySpan?

PS: Если событие onclick диапазона будет происходить до события onblur входного элемента, моя проблема будет решена, потому что я мог бы установить некоторое значение состояния, указывающее на нажатие определенного элемента.

PPS: фон этой проблемы заключается в том, что я хочу, чтобы элемент управления автозаполнения AJAX был запущен извне (из интерактивного элемента), чтобы показать его предложения, без немедленного исчезновения предложений из-за события blur в элементе ввода. Поэтому я хочу проверить в функции blur, был ли нажат один конкретный элемент, и если это так, игнорировать событие размытия.

Answer 1

Я вижу только хаки в ответах, но на самом деле есть встроенное решение, очень простое в использовании: По сути, вы можете захватить элемент фокуса следующим образом:

const focusedElement = document.activeElement

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

Answer 2

Работает в Google Chrome v66.x, Mozilla v59.x и Microsoft Edge ... Решение с jQuery.

Я тестирую в Internet Explorer 9 и не поддерживается.

$("#YourElement").blur(function(e){
     var InputTarget =  $(e.relatedTarget).attr("id"); // GET ID Element
     console.log(InputTarget);
     if(target == "YourId") { // If you want validate or make a action to specfic element
          ... // your code
     }
});

Прокомментируйте свой тест в других версиях Internet Explorer.

Answer 3

Изменить: Хакерский способ сделать это - создать переменную, которая отслеживает фокусировку для каждого интересующего вас элемента. Так что, если вам важно, чтобы myInput потерял фокус, установите для него переменную в фокусе.

<script type="text/javascript">
   var lastFocusedElement;
</script>
<input id="myInput" onFocus="lastFocusedElement=this;" />

Оригинальный ответ: Вы можете передать this в функцию.

<input id="myInput" onblur="function(this){
   var theId = this.id; // will be 'myInput'
}" />