javascript – 防止点击父元素的点击事件点击子元素

前端之家收集整理的这篇文章主要介绍了javascript – 防止点击父元素的点击事件点击子元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > jquery stop child triggering parent event6
我有一个以下菜单,演练到三个层次:
主要>子> subsub
  1. <nav>
  2. <div class="mainMenu">Main Menu Item # 1.
  3. <ul>
  4. <li> Sub Menu Item # 1</li>
  5. <li class="subMenu"> Sub Menu Item # 2
  6. <ul>
  7. <a href="New">
  8. <li>New</li>
  9. </a>
  10. <a href="">
  11. <li>Old</li>
  12. </a>
  13. <a href="">
  14. <li>View </li>
  15. </a>
  16. </ul>
  17. <div class="n_r2_c2"></div>
  18. </li>
  19. <li> Sub Menu Item # 3</li>
  20. <li> Sub Menu Item # 4</li>
  21. </ul>
  22. </div>

这就像我的JQ:

  1. $('.mainMenu').click(function () {
  2. $(this).children('ul').slideToggle(250);
  3. });
  4.  
  5. $('.subMenu').click(function () {
  6. $(this).children('ul').slideToggle(250);
  7. });

问题是主菜单的子菜单切换主菜单工作正常,但是当我单击子菜单中的项目而不是切换其子菜单时,它会自动关闭,因为当我点击子菜单时,主菜单单击事件也被触发很可能是因为子菜单里面是它,它需要点击它的主要div?

无论如何我可以解决这个问题,请帮忙.

解决方法

使用 event.stopPropagation()来防止事件冒出DOM树.

例:

  1. $('.subMenu').click(function (e) {
  2. $(this).children('ul').slideToggle(250);
  3. e.stopPropagation();
  4. });

这将解决您的问题.

猜你在找的JavaScript相关文章