点击事件如何精准捕获目标HTML元素？-html教程-PHP中文网

点击事件如何精准捕获目标HTML元素？

碧海醫心

发布： 2025-03-13 16:42:18

原创

775人浏览过

点击事件如何精准捕获目标HTML元素？

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

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

问题： 一段代码用于监听鼠标点击事件，并在控制台中打印被点击的元素标签名。它使用document.addEventListener('click', handler)监听全局点击事件，并通过document.activeElement.tagName获取焦点元素的标签名。然而，点击<p></p>元素内部时，打印结果却是BODY，而非预期的P。这是因为document.activeElement获取的是当前拥有焦点的元素，而点击<p></p>时，焦点并未直接落在<p></p>上。

原始代码：

<p>content in p</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1591">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680267270309.png" alt="智标领航">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1591">智标领航</a>
                            <p>专注招投标业务流程的AI助手，智能、高效、精准、易用！</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="智标领航">
                                <span>117</span>
                            </div>
                        </div>
                        <a href="/ai/1591" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="智标领航">
                        </a>
                    </div>
                <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>等元素的标签名。

以上就是点击事件如何精准捕获目标HTML元素？的详细内容，更多请关注php中文网其它相关文章！