说我有这个:
<div id="outer">
<div id="inner">
</div>
</div>
外部div的尺寸为500x500,内部尺寸为100x100。我正在尝试使用以下内容:
$('#outer').click(function() {
$('#outer').fadeOut();
});
但是当你点击#inner
的100x100区域时,它仍会淡出。如何防止这种情况?
答案 0 :(得分:28)
我发现这段代码效果更好,并且不依赖于知道元素的id或类:
$('#outer').click(function(e) {
if (e.target === this){
$('#outer').fadeOut();
}
});
答案 1 :(得分:19)
最好不要为内部元素分配点击处理程序。在click函数中,检查事件目标等于outer。像
这样的东西$('#outer').click(function(e) {
if (e.target.id === "outer"){
$('#outer').fadeOut();
}
});
答案 2 :(得分:5)
捕获内部div的点击并阻止其冒泡:
$('#inner').click(function(ev) {
ev.stopPropagation();
});
这是您上面的“外部”点击处理程序的补充。