javascript - 嵌套 : click event only for the deepest that was clicked

Question

这个问题已经有答案了:

nested li - on clicking child, parent click event triggered [duplicate] (1 个回答)

已关闭 9 年前。

我有一个 bootstarp 多级侧边菜单(不使用 jQuery UI 菜单)。不幸的是，当我单击一个子菜单项时，它的所有父菜单项也会被触发。

这是因为我嵌套了 <li>具有“嵌套”id 名称的元素。我需要嵌套名称，以便轻松地从数据库中获取所有子内容。 jQuery UI .menu()方法效果很好，但风格化得很差。因此，我将自定义侧边栏与自定义 click() 事件结合使用。

我怎样才能告诉 jQuery 只处理一个，最深的 <li>元素被点击？

HTML

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
  <li id="m1-" class="dropdown-submenu"><a href="#">Grandfather</a>
  <ul class="dropdown-menu">
    <li id="m1-1-" class="dropdown-submenu"><a href="#">Father</a>
    <ul class="dropdown-menu">
       <li id="m1-1-1" ><a href="#">Son</a></li>
    </ul>
    </li>
  </ul>
  </li>
</ul>

Javascript(处理以“m”开头的 ID 中的点击，即菜单项)

$("li[id^='m']").click(function(){
  //my code to handle the click
});

是的，我现在发现“m”前缀不是正确的前缀，应该像“菜单”一样更独特。我稍后会修复它。

Answer 1

您可以阻止事件从处理程序传播，以便祖先元素的处理程序不会被执行

$("li[id^='m']").click(function(e){
  e.stopPropagation()
  //my code to handle the click
});