点击事件冒泡导致console.log打印错误元素？如何精准获取被点击的HTML元素？

精准捕获点击事件：有效获取html元素

在网页开发中，精确获取用户点击的html元素至关重要。本文针对一个常见问题：如何确保点击页面元素时，console.log 正确显示被点击元素，而非其父元素或其他元素，进行深入分析和解决方案提供。

问题：事件冒泡导致元素识别错误

假设一段代码旨在通过监听点击事件，打印被点击元素的标签名。代码包含

、 和 元素。点击 <input> 和 <textarea> 元素时，代码能正确打印标签名。但点击 </p> <p> 元素时，打印结果却是 body，而非预期的 p。</p> <p>示例代码：</p> <p><span>立即学习</span>“<a href="https://www.xlycwl.com/?golink=aHR0cHM6Ly9wYW4ucXVhcmsuY24vcy9jYjY4MzVkYzdkYjE=" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow noopener" target="_blank">前端免费学习笔记（深入）</a>”；</p> <div style="position:relative; padding:0px; margin:0px;"> <pre><p>content in p</p> <input type="text" value="content in input"> <textarea>content in textarea</textarea> <script> function handler(<a href="https://www.xlycwl.com/tag/event"><b>Event</b></a>) { var x = document.activeElement.tagName; console.log(x); } document.addEventListener('click', handler); </script></pre> <div></div> </div> <p><strong>原因：<a href="https://www.xlycwl.com/tag/%e4%ba%8b%e4%bb%b6%e5%86%92%e6%b3%a1"><b>事件冒泡</b></a>机制</strong></p> <p>问题根源在于事件冒泡。点击 </p> <p> 元素时，事件会向上冒泡至其父元素，最终到达 body 元素。document.activeElement 获取的是当前获得焦点的元素，而点击 </p> <p> 元素不会改变焦点，焦点仍然在 body 上，因此 document.activeElement 返回 body。</p> <p><strong>解决方案：阻止事件冒泡</strong></p> <p><a >解决方法</a>是利用 event.stopPropagation() 方法阻止事件冒泡。将 event.stopPropagation() 添加到事件处理函数中，即可阻止事件向上冒泡，确保 console.log 打印被点击元素本身的标签名。</p> <p>改进后的代码：</p> <div style="position:relative; padding:0px; margin:0px;"> <pre><p>content in p</p> <input type="text" value="content in input"> <textarea>content in textarea</textarea> <script> function handler(event) { event.stopPropagation(); // 阻止事件冒泡 var x = event.target.tagName; // 使用 event.target 获取目标元素 console.log(x); } document.addEventListener('click', handler); </script></pre> <div></div> </div> <p>通过使用 event.target 代替 document.activeElement，我们直接获取到触发事件的元素，从而避免了事件冒泡带来的问题。 此方法更直接、更可靠地获取被点击的 HTML 元素。</p> <p>

以上就是点击