gpt4 book ai didi

javascript - 点击 元素 > JavaScript 输出 document.activeElement VS。事件目标

转载 作者:行者123 更新时间:2023-11-29 14:43:53 25 4
gpt4 key购买 nike

我是 JavaScript 新手。下面是我的代码。

点击按钮后,我明白为什么 event.target 返回 span 对象(因为这是我点击的最里面的元素。对吗?)。

我的疑问是,按照相同的逻辑,为什么 document.activeElement 返回 button 对象而不是 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>

最佳答案

发生这种情况是因为 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.

由于像 spandiv 这样的元素通常不能接收击键或聚焦(通过跳转到它们),它们永远不会是 事件元素。这些标签只有在它们可以接收击键或处于“事件状态”时才会成为事件元素,例如当您将它们设置为 contenteditable 或为它们提供 tabindex

Demo

关于javascript - 点击 <span> 元素 > JavaScript 输出 document.activeElement VS。事件目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35009144/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com