javascript - 点击子div时如何解绑父div的点击事件

Question

<div id="addCompaniesModal">
    <div id="addCompany_map"></div>
    <div class="addMarkerBtn"></div>
</div>

您好，当我点击子项 addCompany_map 时，父项 addCompaniesModal 不应该被调用...我做过这样的事情..但由于某种原因它没有工作..并且父 div 在点击子时被选中，有人可以向我解释解决方案吗

$(document).on('click','#addCompany_map', function (e) {
    e.stopPropagation();
});

$('#addCompaniesModal').click(function(){
});

Answer 1

事件传播发生在从子元素到父元素。

您的第一行可能看起来是在处理子 div 上的点击，但您指定它的方式实际上是在处理文档级别的点击(因为您的选择器是 $(document))并且它仅在发生在子 div 上时调用该方法(on('click','#addCompany_map' 部分)。由于文档是 addCompaniesModal div 的父级，它的点击处理程序将在 addCompaniesModal div 上使用的点击处理程序之后触发。

为了让它工作，您需要将代码更改为:

$('#addCompany_map').click(function (e) {
  e.stopPropagation();
});

$('#addCompaniesModal').click(function(){

});

---

编辑:

我在您的一些评论中看到您使用 $(document).on('click', ... 方法的主要原因是您要添加子 div动态地。

在这种情况下，有 2 种可行的方法来处理您的问题。

第一种方法是动态添加子 div 处理程序，并在删除时解除绑定(bind)。您可以使用这种方法:

function dynamicallyAddChildren(){
  var oldChildDiv = $('#addCompany_map');
  if (oldChildDiv.length > 0)
    oldChildDiv.off('click', handleChildDiv);
  // remove old child if needed and add new child divs
  newChildDiv.on('click', handleChildDiv);
}

function handleChildDiv(e){
  //do something
  e.stopPropagation();
}

$('#addCompaniesModal').click(function(){
});

第二种方法是对子 div 和父 div 使用 $(document).on('click', ... 方法，如下所示:

$(document).on('click','#addCompany_map', function (e) {
    e.stopPropagation();
});

$(document).on('click','#addCompaniesModal', function(){
});​