Question

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

嗨，当我点击孩子 addCompany_map 时，不应该调用父 addCompaniesModal ...我做过类似的事......但由于某种原因它没有work..and父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。

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

第一种方法是让你动态添加子div处理程序，并在删除时取消绑定。你可以使用这种方法：

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(){
});

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

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

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

Answer 2

我想：

$("#addCompany_map").click(function(){
  return false;
});

Answer 3

您在#addCompaniesModal上有一个点击事件，其中包含#addCompany_map。因此，通过点击孩子你也将点击父母。

看来你需要问问自己你想在这里完成什么。如果您希望父类中的子项发生特定事件，我会删除父项上的click事件。如果您希望在父级内的另一个对象#addCompany_map上有一个点击事件，例如.addMarkerBtn，那么就这样做。但是你上面的方式是行不通的。

Answer 4

使用委派并检查目标元素。这应该可以解决你的问题..

这样你就可以在一个处理程序中处理所有三个div点击事件。

$('body').on('click','#addCompaniesModal',function(e) {

    if (e.target.id === 'addCompany_map') {
        alert('Clicked Map Div !!')
    }
    else if (e.target.className === 'addMarkerBtn') {
        alert('Clicked Marker Div !!')
    }
    else {
        alert('Parent Div !!')
    }
});

<强> Check Fiddle

Answer 5

使用此表达式作为您问题的最简单解决方案：

$('#addCompaniesModal').on('click','div', function (e) {
    console.log(e.target.id || e.target.className);
    e.stopPropagation();
});

这也提高了性能，因为reference说：尝试避免过度使用文档或document.body来处理大型文档上的委托事件。因此，你一石二鸟。

第二个表达式可以保持不变：

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

By the way：.click(handler)是.on("click", handler)的快捷方式。

单击子div时如何取消绑定父div的click事件

5 个答案: