javascript單擊事件分隔

Question

我想單獨單擊事件。

所有的body標籤中點擊要警惕「表外」，

除了內部postit-table類的Click事件。

這是我的代碼：

HTML

<table class="postit-table"> 
    <tbody> 
    <tr class="postit-header"> 
     <td>header</td> 
    </tr> 
    <tr> 
     <td><textarea class="postit-content"></textarea></td> 
    </tr> 
    </tbody> 
</table> 

CSS

.postit-table{ 
    width: 200px; 
    height: 200px; 
    background-color: yellow; 
} 

的JavaScript（jQuery的）：

$("body").bind('click',':not(".postit-table,.postit-table tbody, .postit-table tr, .postit-table tbody tr td")', function (e) { 
    alert("clicked outside table!"); 
}); 

$(".postit-table").click(function(){ 
    alert("clicked inside table!"); 
}); 

的jsfiddle：

http://jsfiddle.net/c5fomgp1/

不幸的是，如果你運行的小提琴應用程序，它仍然調用外部表的單擊事件:(

有人可以幫忙嗎？

Answer 1

上postit-table點擊事件中使用stopPropagation()： 這樣的單擊事件將不會傳播冒泡到body元素

示例 - http://jsfiddle.net/e5jph1Lt/

$("body").on('click', function() { 
    alert("clicked outside table!"); 
}); 

$(".postit-table").on('click', function(evt) { 
    evt.stopPropagation(); 
    alert("clicked inside table!"); 
}); 

一點題外話，使用on()代替bind()如果您使用最近的jQuery版本

Answer 2

使用

e.stopPropagation(); 

代碼

http://jsfiddle.net/9e5128g1/

冒泡DOM樹，阻止任何父處理程序被通知的事件阻止事件。

Ref。

http://api.jquery.com/event.stoppropagation/

Answer 3

看起來過於複雜的我。正如其他人已經回答你可以使用event.stopPropagation簡化你的代碼。喜歡的東西：

$(document).on('click', clickedoutside); 
$('body').on('click', '.postit-table', clicked); 

function clicked(e){ 
    e.stopPropagation(); 
    alert('clicked inside table!'); 
}; 

function clickedoutside(e){ 
    alert('clicked <b>outside</b> table!'); 
}; 

這是你改寫jsFiddle

Answer 4

解決

$("body").bind('click',':not(".postit-table,.postit-table tbody, .postit-table tr, .postit-table tbody tr td")', function (e) { 
    alert("clicked outside table!"); 
}); 

$(".postit-table").click(function(e){ 
    e.stopPropagation(); 
    alert("clicked inside table!"); 
}); 

也儘量來回這有其他的解決辦法。 Chears