如何彻底阻止子元素事件冒泡到父元素？-js教程-PHP中文网

如何彻底阻止子元素事件冒泡到父元素？

心靈之曲

发布： 2025-02-20 14:58:26

原创

635人浏览过

如何彻底阻止子元素事件冒泡到父元素？

巧妙解决子元素事件冒泡难题

HTML元素结构中，子元素事件通常会向上冒泡至父元素。然而，某些场景下需要阻止这种冒泡行为，避免父元素误响应子元素事件。

问题：

假设存在如下HTML结构：

<code class="html"><p>@@##@@</img></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/854">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978251103.png" alt="腾讯元宝">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/854">腾讯元宝</a>
                            <p>腾讯混元平台推出的AI助手</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="腾讯元宝">
                                <span>223</span>
                            </div>
                        </div>
                        <a href="/ai/854" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="腾讯元宝">
                        </a>
                    </div>
                </code>

登录后复制

其中<img src="https://img.php.cn/" alt="如何彻底阻止子元素事件冒泡到父元素？">元素绑定了dele_img2点击事件，但无论如何阻止冒泡，父元素<p></p>的showbigpdf事件仍会被触发。

解决方案：

jQuery事件代理在阻止冒泡方面存在局限性。要有效阻止子元素事件冒泡，请直接在目标元素上使用原生JavaScript事件监听器，并调用e.stopPropagation()方法：

<code class="javascript">const imgElement = document.querySelector('img'); // 选择目标img元素
imgElement.addEventListener('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡
  //  在此处添加你的dele_img2事件处理逻辑
});</code>

登录后复制

通过e.stopPropagation()，事件将被阻止向上冒泡到父元素<p></p>，从而避免触发showbigpdf事件。此方法直接操作DOM元素，避免了jQuery事件代理的限制，确保事件冒泡被有效阻止。

以上就是如何彻底阻止子元素事件冒泡到父元素？的详细内容，更多请关注php中文网其它相关文章！