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

时间:2012-11-28 23:39:42

标签: javascript jquery

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

5 个答案:

答案 0 :(得分:4)

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

看起来您的第一行似乎是处理子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(){
});​

答案 1 :(得分:0)

我想:

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

答案 2 :(得分:0)

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

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

答案 3 :(得分: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 !!')
    }
});​

<强> Check Fiddle

答案 4 :(得分:0)

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

$('#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)的快捷方式。