阻止jquery 的click事件冒泡

来源：互联网发布：java边界布局编辑：程序博客网时间：2024/06/05 10:05

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script></head><body><span id="test"  style="height: 500px; width: 500px; background-color: #EEEEEE; display: block;">span<div id="demo1" style="height: 200px; width: 200px; background-color: #ff0000;">div</div></span><script>$("#demo1").click(function(e) {        e.stopPropagation();    });$("#test").click(function(event){$("#test").css("display","none");});</script></body></html>

如果不阻止click事件冒泡，那么当你点击div的时候也会触发父元素span的click事件，我们都没有设置div有click事件，却触发了父元素的click事件，这是我们不想要的，

经过百度一下，几乎都是说调用event.stopPropagation();方法，当然，经过测试真的是调用event.stopPropagation();方法，

但是要注意的是，到底在哪里调用event.stopPropagation();方法，网上几乎都是贴出代码，没有说到，我百度的时候，我也晕，

如果你想阻止谁的click事件传递，那么就在谁的click 回调方法中调用event.stopPropagation();方法来阻止事件冒泡

如上代码：

div是没有设置click事件的

span设置了click事件

要阻止点击div不能触发span事件，

那么你也要设置div的click事件，并在回调方法中调用event.stopPropagation();方法即可

阅读全文

0 0