嵌套 <li>：仅针对被点击的最深 <li> 的点击事件 [重复]答案

【问题标题】：Nested <li>: click event only for the deepest <li> that was clicked [duplicate]嵌套 <li>：仅针对被点击的最深 <li> 的点击事件 [重复]
【发布时间】：2014-07-14 19:11:39
【问题描述】：

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

这是因为我嵌套了带有“嵌套”ID 名称的 <li> 元素。我需要嵌套名称以便轻松地从数据库中获取所有子内容。 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'前缀不是正确的前缀，应该像'menu'一样更独特。我稍后会修复它。

【问题讨论】：

@ShaunakD 这意味着当我点击儿子时，只有儿子会被执行，而不是父亲和祖父的项目。

标签： javascript jquery css html-lists

【解决方案1】：

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

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

【讨论】：

谢谢！不知道那个非常有用的方法。

【解决方案2】：

你可以阻止事件冒泡；

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

【讨论】：

【解决方案3】：

使用 stopPropagation 来防止冒泡事件

 $("li[id^='m']").click(function(e){

    e.stopPropagation();
      //my code to handle the click
    });

注意：在你的 dom 结构中 li 嵌套了另一个 li ..所以当你点击时它可能是冒泡事件

【讨论】：

【解决方案4】：

试试：

$("li[id^='m']").click(function(e){
    e.stopPropagation();
    e.preventDefault();
});

【讨论】：