jQuery Child正在捕获点击次数,只想要父级

Question

说我有这个:

<div id="outer">
 <div id="inner">
 </div>
</div>

外部div的尺寸为500x500,内部尺寸为100x100.我正在尝试使用以下内容:

$('#outer').click(function() {
    $('#outer').fadeOut();
});

但是当你点击100x100区域时#inner,它仍会淡出.怎么预防这个？

Answer 1

我发现这段代码效果更好,并且不依赖于知道元素的id或类:

$('#outer').click(function(e) {
    if (e.target === this){
        $('#outer').fadeOut();
    }
});

Answer 2

最好不要为内部元素分配点击处理程序.在click函数中,检查事件目标等于outer.就像是

$('#outer').click(function(e) {
    if (e.target.id === "outer"){
        $('#outer').fadeOut();
    }
});

工作演示

Answer 3

捕获内部div的点击并阻止它冒泡:

$('#inner').click(function(ev) {
  ev.stopPropagation();
});

这是您上面的"外部"点击处理程序的补充.