使用css或jquery双击子元素时禁用双击父元素[重复]

Question

I created project demo from here

当我双击子元素时，父元素将同时被触发。我不想在父触发器的元素上双击事件，所以有人可以帮助我吗？谢谢

    <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>

Answer 1

你需要使用 event.stopPropagation();对于子元素。

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

您可以通过以下链接了解更多信息。 http://javascript.info/tutorial/bubbling-and-capturing