javascript - 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.target 来完成您想要的。

$('#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 是实际点击的元素

• 如果this与event.target相同则运行代码