为什么同一个事件识别不同的activeElements？

Question

如果我单击一个按钮，activeElement 就是按钮。
如果我留下一个输入框 activeElement 就是 Window.
如果我通过单击按钮离开输入框，activeElement 是...两者？
为什么 onfocusout 事件没有注册与按钮相同的 activeElement？无论如何我可以从输入框离开事件的函数调用访问点击按钮事件？
我可以问，“你离开我是因为那个糟糕的按钮吗？”

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

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

Answer 1

文档界面的 activeElement 只读属性 return 是当前具有焦点的 DOM 中的元素。

通常 activeElement 将 return 一个 HTMLInputElement 或 HTMLTextAreaElement 对象，如果它当时有文本选择的话。如果是这样，您可以使用对象的 selectionStart 和 selectionEnd 属性获取更多详细信息。

另外，确实可以在离开input元素时触发按钮点击，你只需要确保处理好onfocusout函数，并使用函数里面的代码触发点击事件，就可以了参考here.

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>

Answer 2

您可以为 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>

Answer 3

活动中的 relatedTarget 会告诉你它要去哪里

当然，你必须首先使用addEventListener访问event

但我认为这展示了你想要看到的东西

一定会告诉你

"Did you leave me for the lousy button?"

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>

为什么同一个事件识别不同的activeElements？

why does the same event recognise different activeElements?

html

javascript

simultaneous