javascript - 如何避免在子列表中调用回调函数

Question

我有一个名为“sub-menu”的 HTML 父列表，其中有一个子列表“sub-menu-real”。

<li class="sub-menu"><a href="#">HIDE<span class="sub-arrows"></span></a>
  <ul class="sub-menu-real">
      <li class="sub-menu-l1"><a href="#">Hide Level 1</a></li>
      <li class="sub-menu-l2"><a href="#">Hide Level 2</a></li>
      <li class="sub-menu-l3"><a href="#">Hide Level 3</a></li>
      <li class="sub-menu-l4"><a href="#">Hide Level 4</a></li>
  </ul>

问题是，当我使用 JQuery 定义单击“子菜单”时的回调函数时，单击子菜单时也会调用回调函数。

这是Jquery代码：

$(document).ready(function(){

$(".sub-menu").click(function(){
    callbackFunction();
}); 


$(".sub-menu-l1").click(function(){});

$(".sub-menu-l2").click(function(){});

$(".sub-menu-l3").click(function(){});

$(".sub-menu-l4").click(function(){});

在这里，我只是在类中调用 callBackFunction，.sub-menu但是当我单击子菜单子项时会调用它。

我怎样才能避免这个问题？

标签： javascriptjqueryhtml

Answer 1

您希望在触发子级事件时停止事件冒泡click。

像这样的东西：

$(".sub-menu").click(function() {
   callbackFunction();
});

$('.sub-menu-l1,.sub-menu-l2,.sub-menu-l3,.sub-menu-l4').click(function(e) {
    e.stopPropagation();
});