Question

在我的代码中，我在父div上添加了onclick，并希望对内部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无法正常工作。

仅供参考：我的问题与How do I prevent a parent's onclick event from firing when a child anchor is clicked?

不同

Answer 1

您在此处实际要做的是将点击事件绑定到文档，而不是子元素。因此，该事件已经一直蔓延到整个文档，现在尝试使用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>

Answer 2

使用普通香草JS可以按预期工作：

function logEventTarget(e) {
  e.stopPropagation();
  console.log(e.target.id);
}

parentDiv.addEventListener('click', logEventTarget)
childDiv.addEventListener('click', logEventTarget)

<div id="parentDiv">
  parent
  <div id="childDiv">child</div>
</div>

使用内联事件处理程序不会将事件传递给处理程序功能：

function logEventTarget(e) {
  e.stopPropagation();
  console.log(e.target.id);
}

childDiv.addEventListener('click', logEventTarget)

<div id="parentDiv" onclick="logEventTarget()">
  parent
  <div id="childDiv">child</div>
</div>

根本不应该使用内联事件处理程序的众多原因之一。请注意，e.stopPropagation()仍适用于childDiv。

Answer 3

您会注意到，单击chlid元素时，父级会首先触发（这就是父级先打印然后子级打印的原因），因为event capturing在event bubbling之前。为了从父级停止event capturing阶段，您可以停止传播该事件，然后仅触发子事件。

$(document).on('click', '.child', function(e) {
  //e.preventDefault();
  e.stopPropagation();
  console.log('child');
});

$(document).on('click', '.parent', parentfun);
function parentfun(e) {
  e.stopPropagation();
  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>

Answer 4

您还可以通过在HTML代码中进行一些修改来解决此问题

<div class="parent" id="parent-div">

<!-- Just adding parent div text inside span tag -->

<span>parent</span>

<div class="child">child</div>

</div>

现在转到jQuery代码

 $('.parent span').on('click',function(){

  //only print child text u can do more

  alert($('.child').text());

  //Change color of child

  $('.child').css('color','red');

});

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

4 个答案: