网页开发中点击事件目标元素的精准捕获
在网页前端开发中，精确获取用户点击的HTML元素至关重要。本文将分析一段代码，并改进其逻辑，使其能够准确打印出用户点击的HTML元素，而非其父元素。
问题： 一段代码用于监听鼠标点击事件，并在控制台中打印被点击的元素标签名。它使用document.addEventListener('click', handler)监听全局点击事件，并通过document.activeElement.tagName获取焦点元素的标签名。然而，点击元素内部时，打印结果却是BODY，而非预期的P。这是因为document.activeElement获取的是当前拥有焦点的元素，而点击时，焦点并未直接落在上。
原始代码：
content in p
立即学习“前端免费学习笔记（深入）”；
解决方案： 问题根源在于事件冒泡和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返回错误的父元素。 改进后的代码能够准确打印、、等元素的标签名。
