防止jQuery的事件从子元素

触发我有以下代码：防止jQuery的事件从子元素

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" 
    type="text/javascript"> 
    </script> 
    </head> 
    <body> 
    <div id="a"> 
     <div id="b"> 
     <script type="text/javascript"> 
       $('#b').bind('fuffle',function() {alert('b fuffled');}) 
     </script> 
     <div id="c"></div> 
     </div> 
    </div> 
    </body> 
</html>

当我运行

$("#b").trigger('fuffle')

我得到我所期望的警告框。但是，当我跑

$("#c").trigger('fuffle')

我也收到警报框。我猜这是因为c嵌套在b中，但是，有没有一种技巧可以避免这种行为。

在我的代码中，子元素也可以触发fuffle，但它们绑定到不同的方法。此行为从字面上导致JS stackoverflow错误。

来源

2011-07-11 Matt

尝试将事件传递给您的匿名处理函数像

...'fuffle', function(e) {alert...

然后调用

e.stopPropagation()

这将阻止事件冒泡。更钝的方法是返回错误。

http://api.jquery.com/event.stopPropagation/

来源

2011-07-11 23:17:04 tomfumb

另外，希望你的例子是虚假的，但你要分配与嵌入式脚本jQuery的事件处理程序，以便jQuery库加载 – tomfumb

之前是啊，这行可以打，这只是为了证明我的问题:-) – Matt

JavaScript事件冒泡的DOM。您可以：

检查event.target，看该事件源于#C或其子女之一，势必#c事件处理程序，或
绑定一个事件处理#b是stops the event from propagating了DOM树。

来源

2011-07-11 23:18:27

也许有一个简单的检查

$('#b').bind('fuffle',function(){ 
    if($(this).attr("id") == "b"){ 
     alert('b fuffled'); 
    } 
});

来源

2011-07-11 23:18:50

防止jQuery的事件从子元素

回答

相关问题