网页开发中点击事件目标元素的精准捕获

在网页前端开发中，精确获取用户点击的HTML元素至关重要。本文将分析一段代码，并改进其逻辑，使其能够准确打印出用户点击的HTML元素，而非其父元素。

问题： 一段代码用于监听鼠标点击事件，并在控制台中打印被点击的元素标签名。它使用document.addEventListener('click', handler)监听全局点击事件，并通过document.activeElement.tagName获取焦点元素的标签名。然而，点击

元素内部时，打印结果却是BODY，而非预期的P。这是因为document.activeElement获取的是当前拥有焦点的元素，而点击

时，焦点并未直接落在

上。

原始代码：

解决方案： 问题根源在于事件冒泡和document.activeElement的局限性。 解决方法是利用event.target属性直接获取事件目标元素，并使用event.stopPropagation()阻止事件冒泡。

改进后的代码：

function handler(event) {
    event.stopPropagation();
    var x = event.target.tagName;
    console.log(x);
}
document.addEventListener('click', handler);

通过event.target，我们直接获取到被点击的元素，而event.stopPropagation()阻止了事件向上传播，避免了document.activeElement返回错误的父元素。 改进后的代码能够准确打印

、、