如何选择一个类而不是它的内部元素？

Posted 2023-05-09

【中文标题】如何选择一个类而不是它的内部元素？

【英文标题】：How do I select a class but not its inside element?

【发布时间】：2015-05-10 09:56:33

【问题描述】：

说我有

<div id="mydiv">
  <div class="myclass">
       <span class="otherclass"></span>
       and many other classes...
  </div>
</div>

我想在 .mydiv 上捕获点击事件，但不在 .myclass 内。

我尝试了.mydiv:not(.myclass)，但它似乎不起作用。我认为这是因为我可能正在单击其他类，所以 :not(.myclass) 不起作用。我怎样才能得到我想要得到的区域？谢谢！

【问题讨论】：

#mydiv :not(.myclass)

【参考方案1】：

使#mydiv 可点击，做任何你想做的事，并停止从.myclass 传播事件，这样事件就不会从myclass 冒泡到mydiv

     $('#mydiv').click(function()
        // do anything
     )

    // stop event propagation
     $('.myclass').click(function(e)
        e.stopPropagation();
        )

【讨论】：

cool.. 但我可能仍想在 .myclass 中捕获一些点击事件。会不会有影响？

【参考方案2】：

您可以点击mydiv id 并在该函数中编写代码，然后在.myclass 点击事件上您只需编写return false 即可停止进一步执行函数。

$('#mydiv').click(function()
    // stuff your code here
);

//Use `return false` instead of `e.stopPropagation();`
$('.myclass').click(function(e)
  return false;
)

e.stopPropagation() 很危险，请阅读Documentation

【参考方案3】：

调用 .off() 将删除事件处理程序

    $("#mydiv").on('click', function () 
        alert("You clicked mydiv");
    );

    $(".myclass").off('click', function () 
    );
           or like this

   $(".myclass").off();

JS FIDDLE