Example of e.stopPropagation

In this example, a mouseover event is raised when the mouse is moved over both the span and div elements. You can see that the one that doesn't stop bubbling will raise it for the div also, even if the mouse is over the span element.

by jonathon

HTML

<div id="noStop">
    <span>This one doesn't stop bubbling</span>
    <ul></ul>
</div>
<div id="stop">
    <span>This one stops bubbling</span>
    <ul></ul>
</div>

CSS

div,span{
    border: 1px solid;   
}

div{
    width: 200px;
    height: 300px; 
    float: left;
}

ul{
    height: 250px;
    overflow: hidden;  
}

JavaScript

/*
    Example of when you want to stop an event from bubbling up.
    
    In this example, a mouseover event is raised when the mouse is
    moved over both the span and div elements. You can see that the one
    that doesn't stop bubbling will raise it for the div also, even if
    the mouse is over the span element.
*/

(function() {
    var i = 0;

    $("div#noStop").mousemove(function(e) {
        $(this).find("ul").prepend("<li>" + i+++"DIV</li>");
    });

    $("div#noStop span").mousemove(function(e) {
        $(this).siblings("ul").prepend("<li>" + i+++"span</li>");
    });
}());

(function() {
    var i = 0;

    $("div#stop").mousemove(function(e) {
        $(this).find("ul").prepend("<li>" + i+++"DIV</li>");
        e.stopPropagation();
    });

    $("div#stop span").mousemove(function(e) {
        $(this).siblings("ul").prepend("<li>" + i+++"span</li>");
        e.stopPropagation();
    });
}());