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菜單：點擊子菜單也觸發父母的點擊事件

回答

相關問題