javascript - jqueryjqueryui, click anywhere in div besides button - Stack Overflow

admin管理员组

文章数量:1406943

I have a div as a ui-widget-content with a h3 as a ui-widget-header. The header has three buttons. Each have the class "save" "delete" and "cancel" respectivly. I want to have a .click function whene ever you click on the div, except if you actually click on one of the buttons.

I tried: $(".record").not(".save").not(".delete").not(".cancel").click(

my code is:

<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>

However the click function still activated when clicking the buttons.

Any ideas?

I have a div as a ui-widget-content with a h3 as a ui-widget-header. The header has three buttons. Each have the class "save" "delete" and "cancel" respectivly. I want to have a .click function whene ever you click on the div, except if you actually click on one of the buttons.

I tried: $(".record").not(".save").not(".delete").not(".cancel").click(

my code is:

<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>

However the click function still activated when clicking the buttons.

Any ideas?

• javascript
• jquery
• jquery-ui

Share Improve this question Follow asked Dec 10, 2010 at 17:40 kralco626kralco626 8,6644141 gold badges115115 silver badges171171 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

You can use the event.target to see what was clicked. Then rely on even bubbling and attach the click handler on the parent div. jsfiddle

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

Assuming that you have another event handler (or several) that handles the buttons, you can prevent the bubbling there with

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

Use e.stopPropagation() in the buttons' click handler(s):

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

Here's a demo: http://jsfiddle/Ender/2yERz/

And some documentation on e.stopPropagation(): http://www.quirksmode/js/events_order.html#link9

本文标签： javascriptjqueryjqueryuiclick anywhere in div besides buttonStack Overflow