CSS菜单：点击子菜单也触发父母的点击事件

我正在用CSS下拉菜单（实际上是下拉菜单）对嵌套列表完成的现有网站进行一些更改。这里有一个工作现场版本：http://www.escondrijo.com/index_es.html?lang=es CSS菜单：点击子菜单也触发父母的点击事件

对不起，我打算张贴一个screengrab，但我不允许。

我现在意识到，当我点击子菜单项时，它也触发父菜单项的点击事件（之后立即）。

我该如何阻止这种情况？通过调整菜单，或通过某种方式禁用点击事件（但不是当父菜单项本身被点击时）。

如果你需要它，这里是DIV的完整HTML与这个特殊的菜单：

顺便说一句，我有可用的jQuery库...

谢谢！

  <div id="footer_bar"> 
      <ul class="menu"> 
       <li>escondrijo 
        <ul> 
         <li onClick="resetPics(homePics);overlayToggle(document.getElementById('content_thehome'));">guesthouse</li> 
         <li onClick="javascript:window.location.replace('house_rental.html')">house rental</li> 
        </ul> 
       </li> 
       <li onClick="overlayToggle(document.getElementById('content_therooms'));">the rooms 
        <ul> 
         <li onClick="resetPics(hammockPics);overlayToggle(document.getElementById('content_hammock'));">hammock</li> 
         <li onClick="resetPics(woodburnerPics);overlayToggle(document.getElementById('content_woodburner'));">woodburner</li> 
         <li onClick="resetPics(luzPics);overlayToggle(document.getElementById('content_luz'));">luz</li> 
        </ul> 
       </li> 
       <li onClick="resetPics(locationPics);overlayToggle(document.getElementById('content_thelocation'));">the location</li> 
       <li>reservations 
        <ul> 
         <li onClick="overlayToggle(document.getElementById('content_prices'));">prices</li> 
         <li onClick="overlayToggle(document.getElementById('content_request'));">send request</li> 
         <li onClick="overlayToggle(document.getElementById('content_policies'));">policies</li> 
        </ul> 
       </li> 
       <li>more info 
        <ul> 
         <li onClick="overlayToggle(document.getElementById('content_travel'));">travel</li> 
         <li onClick="overlayToggle(document.getElementById('content_directions'));">directions</li> 
         <li onClick="overlayToggle(document.getElementById('content_activities'));">activities</li> 
        </ul> 
       </li> 
       <li><a href="index_es.html?lang=es"><em>&gt;Castellano</em></a></li> 
      </ul> 
     </div>

来源

2012-01-31 terraling

这听起来像你需要调用jQuery的stoppropagation方法。这在你的事件监听器中被调用。因此，举例来说：

$("p").click(function(event){ 
event.stopPropagation(); 
// do something 
});

另一种选择可能是事件监听器添加到父元素，并使用事件代表团找出哪些链接实际点击的用户。这是附加事件监听器的推荐方法。它以更少的开销提供更快的性能。您只能将一个事件侦听器添加到每个列表，而不是每个项目的侦听器。 Here's some more information关于使用这种方法。希望这可以帮助。

来源

2012-01-31 12:38:23

太好了，谢谢。对我来说这里是一个新的领域，上帝知道我如何在没有jQuery的情况下做到这一点，但是我可以添加这个来关闭发生的任何问题： '$（“li ul li”）。click（function （event）{ \t event.stopPropagation（）; }）' – terraling 2012-01-31 13:09:17

Np，很高兴提供帮助。 – 2012-01-31 13:29:09

CSS菜单：点击子菜单也触发父母的点击事件

回答

相关问题