I don't want jQuery click event of underlying div

Question

I have some div with its click actions and another div inside first - 'close-cross' on right-top corner witch close the first one or wherever else.

Problem is that when close-cross div is clicked, the main div click action is called too. Theoretically both are clicked, because the mouse button was pressed, and mouse pointer was above both divs, but I want only the div that is clicked directly to call its click event.

I *think* I understand what you're asking, but putting together a fiddle or showing some markup would be more helpful in understanding what you're getting at. — kinakuta, Oct 02 '12 at 15:49

score 1 · Accepted Answer · answered Oct 02 '12 at 15:49

1

You want to use the event.stopPropagation() method. This prevents events bubbling up the DOM tree. See the jQuery documentation here

answered Oct 02 '12 at 15:49

Josh

1,794
3
17
31

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

In the close function you'll want to call event.stopPropagation()

http://api.jquery.com/event.stopPropagation/

This will prevent the event from bubbling up to the parent div. More on event bubbling:

What is event bubbling and capturing?

edited May 23 '17 at 11:48

Community

1
1

answered Oct 02 '12 at 15:49

jholloman

1,959
14
16

score 1 · Answer 3 · answered Oct 02 '12 at 15:51

Event Bubbling, is what this is called, and it can be checked using this:

$(document).ready(function() {
$('#main').click(function(event) {
if (event.target == this) {
//Your code here
}
});
});

the event.stopPropagation(); stops journey of the event

$(document).ready(function() {
    $('#close-cross').click(function(event) {

    //Your code here
   event.stopPropagation();
    });
    });

score 0 · Answer 4 · answered Oct 02 '12 at 15:53

Check this FIDDLE

$(document).ready(function() {
     // Outer Div click Event
    $('div.a').on('click', function(e) {
        if (e.target.className === 'b') {
            e.preventDefault();
        }
        else {
            alert('Outer Div Clicked !!');

        }
    });

    // Inner Div Click event
    $('div.b').on('click', function(e) {
        alert('Inner Div Clicked !!');
    });
});

I don't want jQuery click event of underlying div

4 Answers4