时间戳

首页 > 解决方案 > stopPropagation 和 preventDefault 不起作用，父点击仍在触发

javascript - stopPropagation 和 preventDefault 不起作用，父点击仍在触发

问题描述

在我的代码中，我添加onclick了父 div 并希望对内部 div 执行其他操作，但单击内部 div 也会触发父级点击。如何阻止？

$(document).on('click', '.child', function(e) {
  e.preventDefault();
  e.stopPropagation();
  console.log('child');
});

function parentfun(sender) {
  console.log('parent');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" onclick="parentfun(this)">
  parent
  <div class="child">child</div>
</div>
上面的 div 是在其他事件的运行时生成的。

点击孩子，也会触发父母的点击。preventDefault 和 stopPropagation 不起作用。

仅供参考：我的问题与单击子锚点时如何防止触发父母的 onclick 事件不同？

标签： javascriptjquery

解决方案

您实际上在这里所做的是将单击事件绑定到文档，而不是子元素。所以事件已经一直冒泡到文档中，试图用 stopPropagation 阻止冒泡已经太迟了。

当我将点击处理程序更改为孩子时，请参见此处：

$(".child").on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  console.log('child');
});

function parentfun(sender) {
  console.log('parent');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" onclick="parentfun(this)">
  parent
  <div class="child">child</div>
</div>

编辑

随着问题发生了一些变化，如果元素是动态创建的，您可以执行以下操作（例如）：

  $(document).on('click', '.parent, .child', function(e) {
    e.stopPropagation();
    if ($(this).is(".child")) {
      console.log('child');
    } else {
      console.log('parent');
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  parent
  <div class="child">child</div>
</div>

推荐阅读