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

jquery / jqueryui，点击除按钮之外的任何地方

3 个答案: