Question

我有以下代码：

<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错误。

Answer 1

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

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

然后致电

e.stopPropagation()

将阻止事件冒泡。更直接的方法是返回false。

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

Answer 2

JavaScript事件冒泡了DOM。你可以：

检查event.target以查看事件是源自#c还是其中一个子节点，绑定到#c的事件处理程序，或
将事件处理程序绑定到#b，stops the event from propagating在DOM树上。

Answer 3

可能有一个简单的检查

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

防止从子元素触发jquery事件

3 个答案: