jquery - dblclick on child also triggers dblclick event on parent

Question

I have this odd problem where i have an UL with some LI elements in it.. I have bound a dblclick() event to both the UL and the LI, and when I dblclick the LI element, both the LI event and the UL event is triggered.. is there a way to avoid this?

This is my code:

    $("ul").dblclick(function () {
        alert("ul clicked");
    });

    $("li").dblclick(function () {
        alert("li clicked");
    });

Answer 1

The dblclick event bubbles up the DOM tree, and ancestor elements are also notified. To prevent the event from bubbling, you need to stop propagation of the event:

$("li").dblclick(function (e) {
    alert("li clicked");
    e.stopPropagation();
});

Example: http://jsfiddle.net/HkUQ4/