时间戳

首页 > 解决方案 > 为什么同一个事件会识别不同的activeElements？

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

问题描述

如果我点击一个按钮，那activeElement就是按钮。
如果我留下一个输入框，那activeElement就是窗口。
如果我通过单击按钮离开输入框，那么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>

标签： javascripthtmlsimultaneous

解决方案

Document 接口的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>

推荐阅读