jquery/jqueryui，點擊div除了按鈕之外的任何地方

Question

我有一個作爲ui-widget-h3作爲ui-widget-header的ui-widget-content的div。標題有三個按鈕。分別具有「保存」，「刪除」和「取消」的類別。我想在你點擊div時有一個.click功能，除非你真的點擊了其中一個按鈕。

我想：$(".record").not(".save").not(".delete").not(".cancel").click(

我的代碼是：

<div class="record cursorPointer hoverClass ui-widget-content"> 
    <h3 class="ui-widget-header"> 
     <table width="100%"><tr> 
      <td align="left" style="width:33%; color:Red">somecontractorone</td> 
      <td style="width:33%" align="center"> Name: Joe Q Shmoe </td> 
      <td style="width:33%" align="right"> Buisness: joeqshmoeelectrical</td> 
      <td><button style="width:20px;height:20px" class="save"></button></td> 
      <td><button style="width:20px;height:20px" class="delete"></button></td> 
      <td><button style="width:20px;height:20px" class="cancel"></button></td></tr> 
     </table> 
    </h3> 
</div> 

但是點擊功能點擊按鈕時仍然激活。

任何想法？

Answer 1

您可以使用event.target來查看點擊的內容。然後依靠冒泡並在父母div上附加點擊處理程序。 jsfiddle

$('.record').click(function(e){ 
    if($(e.target).is(':button')) 
     alert('button'); 
    else 
     alert('not button'); 
}); 

Answer 2

假設你有一個處理的按鈕另一個事件處理程序（或幾個），可以防止在按鈕的點擊處理程序（S）在與

$('button').click(function(e) { 
    e.stopPropagation(); 
    switch(this.className) { 
     // Or whatever... 
    } 
}) 

Answer 3

有氣泡使用e.stopPropagation()：

$('button').click(function(e) { 
    e.stopPropagation(); 
    alert('you clicked a button!'); 
}); 

這裏有一個演示：http://jsfiddle.net/Ender/2yERz/

and some some documents on e.stopPropagation()：http://www.quirksmode.org/js/events_order.html#link9