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

5 回答 5

4

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

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

为了使其工作，您需要将代码更改为：

$('#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', ...第二种方法是对子 div 和父 div使用方法，如下所示：

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

$(document).on('click','#addCompaniesModal', function(){
});​
于 2012-11-28T23:53:59.250 回答
0

使用委托并检查目标元素。那应该可以解决您的问题..

这样您就可以在一个处理程序中处理所有三个 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 !!')
    }
});​

检查小提琴

于 2012-11-28T23:53:09.537 回答
0

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

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

这也提高了性能，正如参考资料所说：尽量避免在大型文档上的委托事件中过度使用 document 或 document.body。因此，您用一块石头杀死了 2 只鸟。

第二个表达式可以保持原样：

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

顺便说一句：.click(handler)是的捷径.on("click", handler)。

于 2012-11-29T09:22:46.647 回答
0

我认为：

$("#addCompany_map").click(function(){
  return false;
});
于 2012-11-28T23:48:09.490 回答
0

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

看来你需要问问自己你想在这里完成什么。如果您希望父级中的子级发生特定的事情，我会删除父级上的单击事件。如果您想在不是 的父对象中的另一个对象上发生单击事件#addCompany_map，例如.addMarkerBtn，请执行此操作。但是你上面的方式是行不通的。

于 2012-11-28T23:50:30.100 回答