Question

考虑以下因素，

$('.child').click(function(event) {
  console.log('click');
  // stuff...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <div class="child btn">
    <p>hello</p>
  </div>
</div>

<div>
  <div class="child btn">
    <p>goodbye</p>
  </div>
</div>

该事件发射两次。为了阻止多个事件发生，在阅读了其他一些帖子后，我添加了

event.stopPropagation();
event.stopImmediatePropagation();

这是否意味着我每次向可能包含多个实例的类元素添加单击处理程序时都需要这两行？

Answer 1

问题是你有语法错误。这是解决错误的正确语法。

$('.child').click(function (event) {
  console.log("stuff");
})

Answer 2

试试这个：

$('.child:first').click(function (event) {
        //stuff
        alert("hello clicked");
});

Answer 3

完全没有。你的代码还可以。当我们在子节点和父节点上绑定事件时，stopPropagation是有用的。因此，在点击子项时，父事件也将触发。为防止这种情况，您可以添加stopPropagation。

$('.parent').click(function(event) {
console.log('click');

});

$('.child').click(function(event) {
console.log('click');
event.stopPropagation();
});

这将停止在被点击的子元素之外传播的事件。

如何指定此单击处理程序以停止冒泡

3 个答案: