<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(){
});
答案 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)
的快捷方式。