Question

我是JavaScript的新手。这是我的代码。

单击按钮后，我理解为什么event.target返回 span 对象（因为这是我点击的最内层元素。正确吗？）。

我怀疑是，为什么document.activeElement会返回按钮对象，而不是 span 对象？当我点击按钮时，是不是应该激活的 span 元素？！

提前感谢您的澄清：=）

<!DOCTYPE html>
<head>
    <script type="text/javascript">
        function GetActive () {
            if (document.activeElement) {
               var output = document.getElementById ("output");
               output.innerHTML = document.activeElement + ’-’ + event.target
             }
        }
     </script>
 </head>
 <body onclick="GetActive ();">    
    Click anywhere on the page to get the active element <input id="myInput" value="input field" />

   <button> <span>Sample button</span> </button>

   <div id="output"></div>

</body>

Answer 1

这是因为document.activeElement报告当前关注的元素（或将接收击键）。

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

由于span和div之类的元素无法接收击键或被关注（通过标记给他们）通常，他们不会成为activeElement 。这些标签只有在可以接收击键或“活跃”时才会成为activeElement，例如当您将它们设为contenteditable或给它们{时{1}}。

Demo

单击<span>元素＆gt; JavaScript输出document.activeElement VS. event.target

1 个答案: