如何 「不處理程序」，從兒童元素

Question

點擊這是我的code：

HTML：

<div id="container"> 
    <div id="box"> 
     Content 
    </div> 
</div>​ 

CSS：

#container 
{ 
    position:relative; 
    width:400px; 
    height:400px; 
    background-color:red; 
} 

#box 
{ 
    position:absolute; 
    width:200px; 
    height:200px; 
    top:100px; 
    left:100px; 
    background-color:blue; 
} 
​ 

的jQuery：

$('#container:not(#box)').click(function (e) { 
    e.preventDefault(); 
    $('#container').fadeOut(300); 
});​ 

我想fadeOut上點擊父母（紅色的div）。如果我點擊藍色的那個（孩子），什麼都不會發生。我如何使用jQuery來做到這一點？試圖用:not，但似乎這不是正確的解決方案......

Answer 1

所有你需要做的是檢查事件起源於（e.target）的元素是否是#container（this）：

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

Answer 2

當您點擊#box，click事件也會在父級#container元素上註冊，因爲事件會冒泡。

有兩種方法可以防止這種情況發生。

首先是停止發生冒泡。您可以通過#box點擊處理程序調用e.stopPropagation()來完成此操作。但是，當然，你沒有任何事件處理程序，所以下一個更具吸引力。

其次是從#container事件處理程序檢查您是否單擊實際的#container或某個孩子，並且事件剛剛冒出來。您可以通過檢查e.target元素並將其與#container事件處理程序中的this進行比較來完成此操作。

Answer 3

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

$('#box').click(function (e) { 
    e.stopPropagation() 
});