cancel bubbling on element click with jQuery

When you click over an element

This is easy, on the element can be attached event listener an such event listener is built in as the click event is. It’s simply like that:

<div click="func1()"></div>

This with jQuery

A bit different with jQuery, but with the same effect is:

$('div').click(func1);

When there is a bubbling?

Well, if you just copy paste this code in your page:

$(document).click(function() { 

    console.log('clicked on the document');

});
$('div').click(function() { 

    console.log('clicked on the div');

});

Note: if you’re using Firefox keep the console.log function, in other case you may replace it with either alert or $.log from the recent jQuery plugin i wrote.

Now if you click over the div element you get both messages, cause there is no bubble canceling. If you’d like to add such canceling, just add this code to the click callback for the div element:

return false;

and now the code should look like:

$(document).click(function() { 

    $.log('clicked on the document'); 

});

$('div').click(function() { 

    $.log('clicked on the div'); return false;

});

Related posts:

1. mouseclick outside a DOM element
2. Event driven programming with jQuery – (part 3). What is a module?
3. jQuery check for element visibility