首页 > web前端 > js教程 > 如何防止子锚点击触发父点击事件?

如何防止子锚点击触发父点击事件?

Linda Hamilton
发布: 2024-12-14 18:39:09
原创
696 人浏览过

How to Prevent Child Anchor Clicks from Triggering Parent Click Events?

防止子锚点单击事件触发父级单击事件

如代码所示,当在父 div 中单击子锚点元素时对于 onclick 事件,这两个事件都会触发。要解决此问题并阻止父级单击事件执行,您有两个选择:

选项 1:检查事件来源

通过检查 jQuery 传递的 eventargs 对象,您可以确定发起点击的元素:

$("#clickable").click(function(e) {
    if($(e.target).is("div")) {
        window.location = url;
        return true;
    }
});
登录后复制

如果发送者元素不是 div 本身,则 div 的onclick 处理程序不会被触发。

选项 2:停止事件冒泡

或者,您可以使用 stopPropagation( ) 子锚点上的方法:

$("#clickable a").click(function(e) {
    // Custom anchor handler
    e.stopPropagation();
});
登录后复制

此方法可防止事件传播到父级div,确保仅触发锚点单击事件。

以上是如何防止子锚点击触发父点击事件?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板