为什么这个 jQuery 选择器对我不起作用？

Question

每次单击网页上除特定对象之外的任何内容时，我都尝试启动一个操作（菜单“树水平线”按钮，类名为“navbutton”），如下所示：

<div class="test">
    <nav id="menu" class="pdng-lr">
        <div class="navbutton">
            <span class="top"></span>
            <span class="middle"></span>
            <span class="bottom"></span>
        </div>
    </nav>
</div>

CSS：

#menu .navbutton
{
    display:none;
}

@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait)
{
.pdng-lr
{
    padding:0px;
}

#menu .navbutton
{
    display:block;
    width:25px;
    height:38px;
    margin-top:40px;
    margin-left:calc(100% - 40px);
    border:none;
    cursor:pointer;
}

#menu .navbutton span
{
    display:inline-block;
    float:left;
    min-height:6px;
    width:100%;
    margin:2px 0px;
    background-color:#cccccc;
    -webkit-transition:all 0.15s linear;
    -moz-transition:all 0.15s linear;
    -o-transition:all 0.15s linear;
    transition:all 0.15s linear;
}

#menu .navbutton .top
{
    margin-top:6px;
}
}

我认为这个脚本可以工作：

jQuery('div:not(".navbutton")').click(function(){
    // just to test if it works
    alert();
});

...但事实并非如此：当我单击 .navbutton 时，它仍然会启动该操作（警报窗口打开）！

谁能告诉我代码有什么问题或者如何让它工作？

我尝试在 jFiddle 上使其尽可能简单，但即使这样它仍然不起作用，请参阅：https://jsfiddle.net/eygka3cn/3/

Answer 1

您的选择器是

div:not(.navbutton)

。

<div class="test">

会触发

click

事件，因为它是一个没有绑定

div

类的

.navbutton

。

.test

是

.navbutton

的父级。

您有一些选择：

• 在

  .test

  选择器中添加

  not

• 单击

  .navbutton

  以停止传播事件，这样

jQuery('.navbutton').click(function(e) {
  e.stopPropagation();
})

完整代码：https://jsfiddle.net/0r2u5x1y/