jquery/jqueryui，单击除按钮之外的 div 中的任意位置

Question

我有一个 div 作为 ui-widget-content 和一个 h3 作为 ui-widget-header。标题有三个按钮。每个都有“保存”“删除”和“取消”类。当您单击 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

假设您有另一个（或多个）事件处理程序来处理按钮，您可以通过

$('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/

还有一些关于e.stopPropagation()的文档：http://www.quirksmode.org/js/events_order.html#link9