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运行代码相同

Answer 2

此选择器将仅选择 <div id="sig_container">：

$('#sig_container')

如果你认为它也在选择孩子，那不是：

alert($('#sig_container').length); // alerts 1

Answer 3

$('#sig_container')

应该做的伎俩。如果没有，你是否通过任何破坏ID的内容传递html？

Jquery选择器问题

3 个答案: