网页开发中点击事件目标元素的精准捕获
在网页前端开发中，精确获取用户点击的HTML元素至关重要。本文将分析一段代码，并改进其逻辑，使其能够准确打印出用户点击的HTML元素，而非其父元素。
问题： 一段代码用于监听鼠标点击事件，并在控制台中打印被点击的元素标签名。它使用document.addEventListener('click', handler)监听全局点击事件，并通过document.activeElement.tagName获取焦点元素的标签名。然而，点击<p></p>元素内部时，打印结果却是BODY，而非预期的P。这是因为document.activeElement获取的是当前拥有焦点的元素，而点击<p></p>时，焦点并未直接落在<p></p>上。
原始代码：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
<p>content in p</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<input type="text">
<textarea></textarea>
<script>
function handler(event) {
var x = document.activeElement.tagName;
console.log(x);
}
document.addEventListener('click', handler);
</script>
解决方案： 问题根源在于事件冒泡和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返回错误的父元素。 改进后的代码能够准确打印<p></p>、<input>、<textarea></textarea>等元素的标签名。
