Mutually exclusive jquery click events

Question

Here I have two click events:

$(document).ready(function() {

    //MESSAGES CHECKBOX
    $(document).on("click",".messages_checkbox",function () {
        alert("clicked box");
    });

    //MESSAGES ROW
    $(document).on("click",".messages_row",function () {
        alert("clicked");
    });

});

And here is the html:

<tr class="messages_row">";
<td><input type="checkbox" class="messages_checkbox" value="1"></td>
</tr>

As you can see, one object is inside another. What I would like to do is fire mutually exclusive (either one or the other - never both) events when either the check box is clicked, or the container itself is clicked.

Right now both events fire if I click the checkbox, one after the other. I only want the checkbox event to fire.

How would I do this?

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

$(document).on("click",".messages_checkbox",function () {
    alert("clicked box");

    // Stops the bubbling
    return false;
});

//MESSAGES ROW
$(document).on("click",".messages_row",function () {
    alert("clicked");

    // Stops the bubbling        
    return false;
});

Make sure to read this answer

edited May 23 '17 at 10:25

Community

1
1

answered Jun 16 '13 at 18:10

gdoron

147,333
58
291
367

Oh, this improves performance then as well? – Amy Neville Jun 16 '13 at 18:13
1

Does this work for delegated events now as well? – Felix Kling Jun 16 '13 at 18:13
@FelixKling, when did it not? – gdoron Jun 16 '13 at 19:42
@AmyNeville, a micro-optimization I would say, but yes. It's significantly better when use mousemove events and such where it can really be a bottle-neck. – gdoron Jun 16 '13 at 19:43
Just tested it and it seems to work. But that was not always the case: http://stackoverflow.com/q/7448860/218196. Or maybe this is/was only a problem when you didn't delegate the parent event handler. – Felix Kling Jun 16 '13 at 19:47

Mutually exclusive jquery click events

1 Answers1