单击子项触发父项[重复]

Question

我在这方面发现了很多问题，但没有一个解决方案对我有好处。当我将多个元素堆叠在一起时，我不断遇到一个功能（在我的情况下是问题）。我有这样的dom情况。

<div class="body" data-type="body" onclick="foo(this)">
  <div class="container" data-type="container" onclick="foo(this)">
  </div>
</div>

所以当我点击 .body 时，console.log 会显示正确的元素。当我单击 .container 时，两个元素都会触发 onclick 事件。有什么办法可以克服这个吗？或者是否有可能以其他方式添加听众？我的纯 jquery 方法看起来像这样。当然，当我使用纯 jquery 时，我没有内联 onclick。

function initSelectable(){
  $('*[data-type]:not(.item-wrapper)').unbind('click').bind('click',function(){
    console.log($(this));
  });
}

感谢您的每一个建议和/或回答！

Answer 1

确保事件没有传播。使用这个：

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

在您的代码中：

function initSelectable(){
  $('*[data-type]:not(.item-wrapper)').unbind('click').bind('click',function(event) {
    console.log($(this));
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
  });
}