Verhindere das Schließen des Dropdown-Menüs beim Klicken im Inneren

Question

Ich habe ein Twitter Bootstrap Dropdown-Menü. Wie alle Twitter Bootstrap-Benutzer wissen, schließt sich das Dropdown-Menü beim Klicken (auch wenn man darin klickt).

Um dies zu vermeiden, kann ich einfach einen Klick-Ereignishandler am Dropdown-Menü anhängen und einfach das berühmte event.stopPropagation() hinzufügen.

       Menüpunkt 1

Dies sieht einfach aus und ist ein sehr verbreitetes Verhalten, jedoch werden carousel-controls (sowie carousel indicators) Ereignishandler an das document-Objekt weitergeleitet, so dass das click-Ereignis auf diesen Elementen (z.B. prev/next controls, ...) "ignoriert" wird.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // Das Ereignis wird nicht nach oben zum document-KNOTEN propagiert und 
    // daher werden weitergeleitete Ereignisse nicht ausgelöst
    event.stopPropagation();
});

Sich auf die Twitter Bootstrap Dropdown hide/hidden-Ereignisse zu verlassen, ist keine Lösung aus folgenden Gründen:

• Das bereitgestellte Ereignisobjekt für beide Ereignishandler enthält keinen Verweis auf das angeklickte Element
• Ich habe keine Kontrolle über den Inhalt des Dropdown-Menüs, sodass das Hinzufügen einer flag-Klasse oder eines Attributes nicht möglich ist

Dieses Fiddle zeigt das normale Verhalten und dieses Fiddle zeigt das Verhalten mit event.stopPropagation() hinzugefügt.

Aktualisierung

Danke an Roman für seine Antwort. Ich habe auch eine Antwort gefunden, die Sie unten finden können.

Answer 1

Wie zum Beispiel bei Bootstrap 4 Alpha gibt es dieses Menüevent. Warum nicht nutzen?

// VERHINDERN INNERHALB DES MEGA-DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});

Answer 2

Bootstrap hat dieses Problem selbst gelöst, indem sie

-Tags in Dropdowns unterstützen. Ihre Lösung ist ziemlich verständlich und du kannst sie hier lesen: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js

Es läuft darauf hinaus, die Propagierung am Dokumentenelement zu verhindern und dies nur für Ereignisse des Typs 'click.bs.dropdown.data-api' zu tun, die dem Selektor '.dropdown .your-custom-class-for-keep-open-on-click-elements' entsprechen.

Oder im Code

$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
    event.stopPropagation();
});

Answer 3

Ich hatte kürzlich ein ähnliches Problem und habe verschiedene Möglichkeiten ausprobiert, es zu lösen, indem ich das Datenattribut data-toggle="dropdown" entfernt und auf das click mit event.stopPropagation() gehört habe.

Der zweite Weg scheint bevorzugt zu sein. Auch Bootstrap-Entwickler verwenden diesen Weg. In der Quelldatei fand ich die Initialisierung der Dropdown-Elemente:

// AUF STANDARD-DROPDOWN-ELEMENTE ANWENDEN
$(Dokument)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);

Also, diese Zeile:

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

schlägt vor, dass Sie ein form-Element innerhalb des Containers mit der Klasse .dropdown platzieren können, um das Schließen des Dropdown-Menüs zu vermeiden.

Answer 4

Sie könnten einfach event.stopPropagation beim Klick auf die Links selbst ausführen. So etwas wie das.

    $(".dropdown-menu a").click((event) => {
         event.stopPropagation()
         let url = event.target.href
         //Machen Sie etwas mit der URL oder einer anderen gewünschten Logik
    })

Bearbeiten: Wenn jemand diese Antwort sieht und React verwendet, funktioniert es nicht. React behandelt die JavaScript-Ereignisse anders und zum Zeitpunkt des Aufrufs Ihres React-Ereignishandlers wurde das Ereignis bereits ausgelöst und verbreitet. Um das zu überwinden, sollten Sie das Ereignis manuell anhängen, wie folgt

handleMenuClick(event) {
   event.stopPropagation()
   let menu_item = event.target
   //Implementieren Sie hier Ihre Logik.
}
componentDidMount() {
    document.getElementsByClassName("dropdown-menu")[0].addEventListener(
        "click", this.handleMenuClick.bind(this), false)
   }
}

Answer 5

Sie können das Klicken auf das Dropdown-Menü stoppen und dann manuell die Karussellsteuerungen mit Carousel-JavaScript-Methoden neu implementieren.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

$('a.left').click(function () {
    $('#carousel').carousel('prev');
});

$('a.right').click(function () {
    $('#carousel').carousel('next');
});

$('ol.carousel-indicators li').click(function (event) {
    var index = $(this).data("slide-to");
    $('#carousel').carousel(index);
});

Hier ist der jsfiddle.