如何防止引導下拉選單在內部點擊時關閉，同時維護委派事件處理程序功能？

管理下拉選單：防止內部點擊導致選單關閉

Twitter Bootstrap 下拉選單面臨的挑戰是它們傾向於在任何點擊時關閉，包括在選單本身內進行的點擊。為了克服這個限制，通常使用簡單的 event.stopPropagation() 將事件處理程序附加到下拉式選單。

但是，此解決方案有一個缺點：像輪播控制項這樣的元素的委託事件處理程序變得無效。要理解這一點，請考慮以下程式碼：

<code class="html"><ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <!-- Carousel content -->
        </div>
      </li>
    </ul>
  </li>
</ul></code>

<code class="javascript">$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});</code>

透過將事件處理程序附加到ul.dropdown-menu.mega-dropdown-menu，我們打算防止選單在任何點擊時關閉在其中。但是，在文件物件上為輪播控制項等元素註冊的委託事件處理程序會變得無效，導致它們無法觸發事件。

解決方案：

解決此問題問題，您可以使用以下程式碼：

<code class="javascript">$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});</code>

透過使用$(document).on( 'click', ...)，您可以確保事件處理程序附加到整個文件物件。這允許它攔截下拉式選單中的點擊，同時仍然允許委託的事件處理程序正常運作。

以上是如何防止引導下拉選單在內部點擊時關閉，同時維護委派事件處理程序功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！