disable double click on parent element when double click on children element using css or jquery

Question

When I double click on element of children, so element of parent will be trigger on the same time. I don't want double click event on element of parent trigger, so everbody can help me? Thanks

    <style>
    #parent {
        width: 200px;
        height: 200px;
        position: relative;
        border: 1px solid black;
    }

        #parent:hover {
            cursor: pointer;
            background: green;
        }

    #children {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 10px;
        left: 10px;
        border: 1px solid black;
    }

        #children:hover {
            cursor: pointer;
            background: blue;
        }
</style>
<div id="parent">
    <div id="children"></div>
</div>
<script>
    $('#children').dblclick(function () {
        alert('children');
    });
    $('#parent').dblclick(function () {
        alert('parent');
    });
</script>

You have to stop propagation like "event.stopPropagation()" in children event. — syms, Jun 26 '15 at 04:51
**[Event bubbling](http://stackoverflow.com/q/4616694/3639582)** http://jsfiddle.net/2pnL03u8/1/ — Shaunak D, Jun 26 '15 at 04:56

score 1 · Answer 1 · answered Jun 26 '15 at 05:05

1

You need to use event.stopPropagation(); for child element.

 $('#children').dblclick(function (event) {
     event.stopPropagation();
     alert('children');
 });

You can learn more about it from following link. http://javascript.info/tutorial/bubbling-and-capturing

answered Jun 26 '15 at 05:05

Harshal Sawant

607
3
7

Thank you. This work for me!! – Hieu Hoang Jun 26 '15 at 05:32

disable double click on parent element when double click on children element using css or jquery

1 Answers1