Wie kann verhindert werden, dass Bootstrap-Dropdown-Menüs bei internen Klicks geschlossen werden, während die Funktionalität des delegierten Ereignishandlers erhalten bleibt?

Dropdowns verwalten: Schließen von Menüs bei internen Klicks verhindern

Die Herausforderung bei Twitter Bootstrap-Dropdowns besteht darin, dass sie dazu neigen, sich bei jedem Klick zu schließen, auch wenn dieser im Menü selbst erfolgt. Um diese Einschränkung zu überwinden, ist es üblich, mit der einfachen Funktion event.stopPropagation() einen Event-Handler an das Dropdown-Menü anzuhängen.

Diese Lösung hat jedoch einen Nachteil: Delegierte Event-Handler für Elemente wie Karussell-Steuerelemente werden unwirksam. Um dies zu verstehen, betrachten Sie den folgenden Code:

<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>

Durch das Anhängen des Event-Handlers an ul.dropdown-menu.mega-dropdown-menu wollen wir verhindern, dass das Menü bei jedem Klick geschlossen wird darin. Allerdings werden delegierte Ereignishandler, die im Dokumentobjekt für Elemente wie Karussellsteuerelemente registriert sind, unwirksam, was dazu führt, dass sie keine Ereignisse mehr auslösen können.

Lösung:

Um dieses Problem zu beheben Problem können Sie den folgenden Code verwenden:

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

Durch die Verwendung von $(document).on('click', ...) stellen Sie sicher, dass der Ereignishandler an das gesamte Dokumentobjekt angehängt ist. Dadurch können Klicks im Dropdown-Menü abgefangen werden, während delegierte Ereignishandler weiterhin ordnungsgemäß funktionieren.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Bootstrap-Dropdown-Menüs bei internen Klicks geschlossen werden, während die Funktionalität des delegierten Ereignishandlers erhalten bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!