当使用css或jquery双击子元素时,禁用双击父元素

时间:2015-06-26 04:48:30

标签: javascript jquery html css

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>

1 个答案:

答案 0 :(得分:1)

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

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

您可以通过以下链接了解详情。 http://javascript.info/tutorial/bubbling-and-capturing