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(){});

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

如何避免这个问题？

Answer 1

在孩子上触发click事件时，您想停止event bubbling。

类似这样的东西：

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

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

Answer 2

您已将EventListener类添加到包装的<li>元素中的sub-menu。只要您的孩子被包裹在该元素中，就会通过单击该元素来调用单击处理程序（这些孩子是该元素的一部分）。

因此，如果要摆脱这种行为，则需要删除该侦听器：

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

否则，每次在.sub-menu内的元素上单击都会调用该单击处理程序。

Answer 3

e.stopPropagation()可以用于子元素。希望这会有所帮助

$(".sub-menu").click(function(e){
 
    callbackFunction();
}); 
$(".sub-menu-real li").click(function(e) {
        e.stopPropagation();
});

function callbackFunction()
{
   alert(1)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>

Answer 4

使用a元素作为click事件的触发器：

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

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

4 个答案: