Jquery选择器问题

Question

我的页面上有以下html标记,

<div id="sig_container">
    <div id="layer1" class="layer ui-draggable ui-resizable ui-resizable-autohide">
    <div id="layer2" class="layer ui-draggable ui-resizable ui-resizable-autohide">
    <div id="layer3" class="layer ui-draggable ui-resizable selected ui-resizable-autohide">
</div>

在这个页面上,我试图选择#sig_container div,而不选择任何一个孩子.但是我遇到了一个问题.选择器要么选择所有内容,要么不选

在此先感谢丹尼尔

编辑:对不起,我应该添加我试图在容器上添加一个点击事件.所以我希望只有当我点击容器而不是孩子时才会触发事件.

Answer 1

您可以通过测试event.targetclick事件来完成您想要的任务.

$('#sig_container').click(function( event ) {
    if( event.target === this ) {
        // the children were not clicked, so run your code
    }
});

这样做的原因是点击事件自然会冒泡,所以如果你点击其中一个孩子,事件会冒泡到sig_container并触发其处理程序.

使用此解决方案,您可以确保target事件的实际发生sig_container在触发代码之前.

所以基本上:

• this 是个 sig_container

• event.target 是点击的实际元素

• if this与event.target运行代码相同