Question

我有一个容器<div>，它有动态附加的div。 div通过click元素给出了body个句柄，如下所示：$(body).on("click",".divClass",function);（我这样做，以便动态添加元素的绑定可以在一个地方完成代码，并防止大量的绑定）。我需要在容器div上放置stopPropagation()，以便其父级的点击句柄不会被触发。问题是，当我在容器div上放置stopPropagation时，它会阻止子div触发（因为它实际上是具有绑定的主体，而不是子div）

这是一个演示我的问题的小提琴：

＆＃13;

$("#A").click(function() {

  console.log('This event should not fire when clicking innermost')

});

$("#B").click(function(e) {

  e.stopPropagation();

});

$("body").on("click", "#C", function() {

  console.log('This event should fire when clicking innermost')

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
  outermost&nbsp;
  <div id="B">
    middle&nbsp;
    <div id="C">
      innermost
    </div>
  </div>
</div>

＆＃13;

Answer 1

我希望其他孩子像往常一样繁殖，只有孩子们 #B不应传播。

考虑到这一点，您的原始代码并没有太远。看到您在示例中直接绑定到#B，我认为#B是静态的。

在这种情况下，使用#B作为静态参考，而不是body。

＆＃13;

$("#A").click(function(e) {
  console.log('This event should not fire when clicking innermost')
});

$("#B").click(function(e) {
  e.stopPropagation();
});

$("#B").on("click", "#C", function(e) {
    console.log('This event should fire when clicking innermost')
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
  outermost&nbsp;
  <div id="B">
    middle&nbsp;
    <div id="C">
      innermost
    </div>
  </div>
</div>

＆＃13;

Answer 2

如果您首先将委派的处理程序绑定到#B，我认为整个问题会更简单。然后事件不需要冒泡到body，stopPropagation将产生预期效果。

$("#A").click(function() {
  console.log('This event should not fire when clicking innermost')
});

$("#B").on("click", "#C", function(e) {
  e.stopPropagation();
  console.log('This event should fire when clicking innermost')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
  outermost&nbsp;
  <div id="B">
    middle&nbsp;
    <div id="C">
      innermost
    </div>
  </div>
</div>

当孩子通过$（身体）绑定时，停止在父div上的传播？

2 个答案: