jQuery Prevent Event Bubbling


InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

jQuery Prevent Event Bubbling

Here we look at how to prevent events bubbling using jQuery.

A little while ago I was looking at how to stop an event bubbling up using Javascript. I though it would be really quick to find out how to do it, but in the event my searches took a little while longer than I thought it would do, but I found the answer in the end. So what a nice a surprise it was today to find out that I could have done this using jQuery! So I had to get a quick mention on the high-flying.co.uk website.

So let's say we have an outer and an inner div, and both divs have event handlers wired up for clicking in the div:


<div id="outerClickMe">
    Outer Click Me
    <div id="clickMe">
        Click Me
    </div>
</div>



<script type="text/javascript">

    $(document).ready(function () {
        $('#clickMe').bind("click", function (event) {
            $('#clickMe').after("<br />and some extra");
        });

        $('#outerClickMe').bind("click", function (event) {
            $('#outerClickMe').before("Some before<br />");
        });
    });

</script>


So what happens here is that if we click the outer div, the outer div click event fires, but if we click the inner div, the inner div's click event fires, but then additionally after this the event bubbles up to the outer div and caused the outer div's click event to fire too! So you may not want that to happen in certain cases, so:

jQuery Prevent Event Bubbling

So using jQuery, all you need to stop the event bubbling up is the event.stopPropagation() method call.


event.stopPropagation();

So in the previous example, the following code stops the inner div's click event bubbling up to the outer div's event handler:


<script type="text/javascript">

    $(document).ready(function () {
        $('#clickMe').bind("click", function (event) {
            $('#clickMe').after("<br />and some extra");
                event.stopPropagation();
        });

        $('#outerClickMe').bind("click", function (event) {
            $('#outerClickMe').before("Some before<br />");
        });
    });

</script>


Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.