javascript精准捕获点击事件：如何获取被点击的html元素？
网页开发中，精确获取用户点击的HTML元素至关重要。本文解决一个常见的JavaScript事件处理难题：如何确保点击页面元素时，console.log输出的是被点击元素本身，而非其父元素或其他相关元素。
问题： 代码旨在打印用户点击元素的标签名。使用document.addEventListener('click', handler)监听点击事件，并用document.activeElement.tagName获取焦点元素标签名。然而，点击<p></p>标签内内容时，输出为body，而非预期的p。
示例代码：
<p>content in p</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</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返回当前获得焦点的元素。点击<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/js/2992" title="jQuery点击事件遮罩弹出层可移动特效代码"><img
src="https://img.php.cn/upload/jscode/000/000/001/5c3947fc24880170.png" alt="jQuery点击事件遮罩弹出层可移动特效代码" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/js/2992" title="jQuery点击事件遮罩弹出层可移动特效代码">jQuery点击事件遮罩弹出层可移动特效代码</a>
<p>"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。</p>
</div>
<a href="/xiazai/js/2992" title="jQuery点击事件遮罩弹出层可移动特效代码" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>内容时，焦点并未直接落在<p></p>上，而是冒泡到body，导致document.activeElement返回body。
解决方案： 利用事件对象的event.target属性。event.target直接指向触发事件的元素，不会受到事件冒泡的影响。 修改后的代码如下：
<p>content in p</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
<input type="text">
<textarea></textarea>
<script>
function handler(event) {
var x = event.target.tagName;
console.log(x);
}
document.addEventListener('click', handler);
</script>
通过使用event.target，我们能够准确获取到被点击的HTML元素，有效解决了事件冒泡导致的元素获取错误问题。 这确保了代码的可靠性和准确性，在处理用户交互时至关重要。
