如何取消點擊JQuery容器內的元素時容器div觸發器的點擊事件？

Question

如

<div class="container"> 
    <div class="inside">I am not fire when click me</div> 
</div> 

$('.container').click(function(){ 
    // container do something here 
}); 

，但是，當我點擊DIV中也引發了容器的Click事件，因爲DIV是在容器內，所以，我需要一種方法來防止容器事件觸發，當我點擊裏面div！

非常感謝！

Answer 1

作爲一個更通用的解決方案，你應該在container的click事件處理程序檢查e.target。

$('.container').click(function(e) { 
    // If you want to ignore clicks to anything inside the `.container` div: 
    if (!$(e.target).hasClass('container')) return; 
    // or, if you only want the `.inside` div to not fire the event, 
    if ($(e.target).hasClass('inside')) return; 

    // container do something here 
}); 

這樣你就不會阻止事件的傳播，這會破壞綁定live處理程序。

Answer 2

添加click事件處理程序內部如下：

$('.inside').click(function(event) { 
    // do anything you might want with the click for inside 
    return false; // prevents click event from bubbling up the DOM hierarchy 
}); 

另外，event.stopPropagation()也防止起泡，像這樣：

$('.inside').click(function(event) { 
    // do anything you might want with the click for inside 
    event.stopPropagation(); // prevents click event from bubbling up the DOM hierarchy 
}); 

This article解釋事件冒泡。

Answer 3

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

這應該適合你。它停止任何點擊內部div從冒泡到容器。

這裏有一個簡單的例子，以及 -