Preventing a JQuery click listener

Question

I have a .click() on a div.

I added a button in the div and now every time I click the button, the JQuery does the function associated with the div and preforms the action on the button.

I understand why it is doing this. I was wondering if I could make the click listener ignore the children?

Is there already a function/syntax for that or do i need to make one from scratch? The div and the button are called by #id.

adeneo · Accepted Answer · 2016-02-12 01:28:01Z

2

To make the event listener ignore children, you can check that the bound element is the same as the target

$('div').on('click', function(e) {

    if ( e.target === this ) {
       // DIV was clicked, not children
    }

});

Or go the other way, preventing the event from bubbling up

$('div button').on('click', function(e) {
    e.stopPropagation();
});

answered Feb 12, 2016 at 1:28

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

choz Over a year ago

The first one is suffice to fulfill this task.

adeneo Over a year ago

@choz - either one will solve the issue, just noting that there are generally two ways of doing this, stopping the click from bubbling, or just ignore any clicks that didn't come from the bound element

choz Over a year ago

I prefer the first one since we don't need to attach another event handler to the button to avoid bubbling events..

adeneo Over a year ago

@choz - agreed, that would be my choice as well, but there are instances when the second one is preferable as well.

Collectives™ on Stack Overflow

Preventing a JQuery click listener

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related