почему одно и то же событие распознает разные активные элементы?

ProgramBox

почему одно и то же событие распознает разные активные элементы?

Post author:admin
Запись опубликована:12 января, 2022
Post category:Вопросы по программированию

#javascript #html #simultaneous

Вопрос:

Если я нажму кнопку, это будет та activeElement самая кнопка.
Если я оставлю поле ввода activeElement , это будет окно.
Если я оставлю поле ввода, нажав на кнопку activeElement , это … и то, и другое?
Почему onfocusout событие не регистрируется так же activeElement , как кнопка? В любом случае, могу ли я получить доступ к событию нажатия кнопки из вызова функции события inputbox-leave?
т. е. могу ли я спросить: «Ты бросил меня из-за паршивой кнопки?»

 <button  type="button" onclick = "myFunction()">   button   </button><br>
<input   type="text" onfocusout= "myFunction()">  </input>

<script>
function myFunction() { 
  console.log(document.activeElement);
} 
</script>

Ответ №1:

Вы можете добавить прослушиватель событий для кнопки внутри функции myFunction()

 function myFunction() { 
  // console.log(document.activeElement);
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function (event) {
        console.log(event);
  });
}

 <!DOCTYPE html>
<html>
    <body>
        <button id="btn" type="button">button</button><br>
        <input type="text" onfocusout="myFunction()" />
    </body>
</html>

Ответ №2:

Свойство activeElement только для чтения интерфейса документа возвращает элемент в DOM, на котором в данный момент сосредоточен фокус.

Часто activeElement возвращает объект HTMLInputElement или HTMLTextAreaElement, если в нем в данный момент выделен текст. Если это так, вы можете получить более подробную selectionStart информацию, используя свойства объекта selectionEnd и.

Кроме того, действительно возможно вызвать нажатие кнопки при выходе из элемента ввода, вам просто нужно убедиться, что вы обработали функцию onfocusout, и использовать код внутри функции для запуска события щелчка, на которое вы можете ссылаться здесь.

 function onMouseUp(e) {
  const activeTextarea = document.activeElement;
  const selection = activeTextarea.value.substring(
    activeTextarea.selectionStart, activeTextarea.selectionEnd
  );
  const outputElement = document.getElementById('output-element');
  const outputText = document.getElementById('output-text');
  console.log({ id: activeTextarea.id, selection});
}

const textarea1 = document.getElementById('textarea1');
const textarea2 = document.getElementById('textarea2');
textarea1.addEventListener('mouseup', onMouseUp, false);
textarea2.addEventListener('mouseup', onMouseUp, false);

 <textarea name="textarea1" id="textarea1" rows="7" cols="40">This is Text Area One.</textarea>
<textarea name="textarea2" id="textarea2" rows="7" cols="40">This is Text Area Two</textarea>

1. Если вы внимательно прочтете вопрос, то возникнет вопрос: почему одно и то же событие распознает разные активные элементы? И если вы внимательно посмотрите на мой ответ, я уже ответил на этот вопрос и вывожу и дополняю другие обычаи. Пример должен продемонстрировать, как использовать дополнительную грамматику.

2. Кроме того, в ответе я также объяснил название события при выходе из ввода и как вызвать грамматическую ссылку нажатия кнопки

3. Так что то, что вы комментируете, на мой взгляд, действительно необъяснимо. Вы действительно внимательно прочитали вопрос и мой ответ?

Ответ №3:

relatedTarget На мероприятии будет показано, куда он отправляется

конечно, вы должны использовать addEventListener для доступа event в первую очередь

Но я думаю, что это демонстрирует то, что вы хотите видеть

это определенно скажет вам

«Ты бросил меня из-за паршивой пуговицы?»

 const button = document.querySelector('button')
const input = document.querySelector('input')

function buttonHandler(e) {
  console.log('button clicked');
}

function inputHandler(e) {
  console.log('leaving input for', e.relatedTarget?.tagName || 'window');
}
input.addEventListener('focusout', inputHandler);
button.addEventListener('click', buttonHandler);

 <button type="button">   button   </button><br>
<input type="text"> </input>

1. Спасибо @Bravo! экспериментируя с вашим решением, я вижу, что e.relatedTarget успешно отслеживает, куда следующий элемент activeElement идет дальше. Идеально! Но почему это не работает в противоположном направлении? Почему e.не связано с событием нажатия кнопки = с событием ввода-выхода? Почему он равен нулю?

2. если мой вызов функции с помощью кнопки зависит от результатов вызова функции, завершающихся событием ввода «Оставить», может ли это вызвать проблемы?

3. @AndreiCleland — я действительно не понимаю — возможно, какой-нибудь пример кода поможет

Метки: почему одно и то же событие распознает разные активные элементы?