阻止jquery 的click事件冒泡

xiaoxiao2021-02-28  74

<!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();方法即可

转载请注明原文地址: https://www.6miu.com/read-32602.html

最新回复(0)