wake-up-neo.com

Gibt es ein DOM-Ereignis, das ausgelöst wird, wenn ein HTML-Auswahlelement geschlossen wird?

Ich bin auf der Suche nach einem DOM-Ereignis, das ich mit JavaScript anhören kann, wenn ein Select-Element, das geöffnet wurde (aber keine Optionen geändert wurden), durch Klicken auf das Select-Element an einer anderen Stelle auf der Seite geschlossen wird.

Es ist nicht das blur-Ereignis der Auswahl, da die Auswahl den Fokus behält. Ebenso ist es nicht das focus-Ereignis eines anderen Elements oder Dokuments oder eine mousedown oder click im Fenster, Dokument oder Hauptteil.

Es ist nicht das change-Ereignis des select, da keine Option innerhalb des select geändert wurde.

Ich mache mir keine Sorgen um ältere Internet Explorers - nur etwas, das in standardkonformen, modernen Browsern funktioniert. Proprietäre Hacks könnten jedoch wissenswert sein.

Ich habe ein JSFiddle erstellt, um das Problem zu demonstrieren: http://jsfiddle.net/premasagar/FpfnM/

  1. Klicken Sie auf das Auswahlfeld im Bereich "Ergebnis"
  2. Klicken Sie mit einem einzigen Klick auf den mit "HERE" (oder irgendwo anders) markierten Text, um zu sehen, ob ein Ereignis zum Protokoll hinzugefügt wird. Es gibt kein Ereignis im neuesten Chrome oder Firefox.

Die Frage ist also: Welches JavaScript könnte hinzugefügt werden, um ein Ereignis zu protokollieren, wenn Sie außerhalb der Auswahlbox klicken?

(Ich habe hier eine ähnliche, aber andere Frage gestellt:
JavaScript für iOS: Öffnen eines HTML-Auswahlelements )

51
Premasagar

Leider gibt es kein Standardereignis, um zu wissen, wann eine Auswahlbox geschlossen oder geöffnet ist, so dass Ihr Code mit Behinderungen für verschiedene Browser ziemlich haarig sein wird. Das heißt, ich denke, es ist möglich, und ich habe etwas in Firefox mit dem Ereignis mouseup für Sie zum Laufen gebracht:

http://jsfiddle.net/FpfnM/50/

In Firefox (und ich gehe davon aus, dass Chrome) ist, müssen Sie den Status dieser Auswahl ziemlich genau verfolgen. Wenn eine escape-Taste gedrückt wird oder ein blur-Ereignis eintritt, müssen Sie den Status aktualisieren, um ihn als geschlossen zu kennzeichnen. Ich habe das in meiner Demo nicht implementiert, und Sie können sehen, was passiert, wenn Sie die Escape-Taste drücken, anstatt das Auswahlfeld anzuklicken.

In Safari war es einfacher. Ein mousedown -Ereignis für die Auswahl bezeichnet das Öffnen der Auswahl, und ein Schließen der Auswahl wird durch ein click-Ereignis gekennzeichnet.

Wenn Sie einen Browser finden, bei dem keines dieser Ereignisse ausgelöst wird, können Sie einen zusätzlichen Trick ausprobieren. Da Formular-Widgets wie select und textarea häufig vom Betriebssystem gerendert werden und nicht innerhalb des Browsers, ist es möglich, dass Sie mit ihnen interagieren und bestimmte Meldungen möglicherweise nicht an den Event-Handler des Browsers weitergeleitet werden. Wenn Sie ein transparentes Textfeld, das den Bildschirm überdeckt, bei geöffnetem Auswahlfeld mit einem niedrigeren Z-Index positionieren, können Sie es möglicherweise verwenden, um diesen Schließklick zu verfolgen. Eventuell können Ereignisse erfasst werden, die ein Browser-DOM-Element vermisst.

Update: Chrome sieht beim Öffnen eine Mausedown und beim Anklicken der Seite mit einem Mausklick auf das Dokument eine Maus. Hier ist eine Version, die mit Chrome funktioniert:

http://jsfiddle.net/FpfnM/51/

Auch hier müssen Sie einige Browsererkennungen durchführen, um das richtige Verhalten in jedem zu beheben. Ein Haken bei Chrome ist insbesondere, dass kein Ereignis ausgelöst wird, wenn Sie ein zweites Mal auf die Auswahl klicken, um sie zu schließen. Sie können jedoch das Klicken der Seite erkennen.

Kurze Zusammenfassung:

Chrome/Safari: select.mousedown on open, document.mouseup on close
Firefox: select.click on open, document.mouseup on close
IE8/IE7: select.click on open, document.mouseup on close

Es gibt sehr viele Edge-Fälle für andere Ereignisse, die ein Schließen anzeigen (Fluchttastendruck, Unschärfe usw.). Dies ist jedoch die Mindestanforderung für das Szenario, in dem ein Benutzer auf das Auswahlfeld klickt und dann in den Dokumentbereich klickt .

Hoffe das hilft!

29
Jason Striegel

Wenn Sie mehr als 1 Dropdown haben:

        $("select").each(function () {
        var initDropdown = $(this);
        initDropdown.data("open", false);
        console.log(this.name + "   closed");

        initDropdown.on("blur", function () {
            var blurDdopdown = $(this);
            blurDdopdown.data("open", false);
            console.log(this.name + "   closed");
        });
    });

    $("select").bind("click", function () {
        var clickedDropdown = $(this);

        if (clickedDropdown.data('open') == false) {
            clickedDropdown.data('open', true);
            console.log(this.name + "   open");
        } else {
            clickedDropdown.data('open', false);
            console.log(this.name + "   closed");
        }
    });
2
Bogdan

Mein erster Instinkt ist ein kleiner Kreisverkehr, um dies zu erreichen. Ich würde den Code verwenden, den Sie normalerweise zum Schließen eines (benutzerdefinierten) Dropdown-Menüs an der Druckmaschine außerhalb verwenden:

function clickInBody(){
 functionToCallOnBlur();
}

function clickInBodyStop(event){
    event.stopPropagation();
}

Dann fügen Sie an Ihrem Körper-Tag onClick="clickInBody()" hinzu, und an Ihrem ausgewählten Element fügen Sie onClick="clickInBodyStop(event)" hinzu. Dies sollte das Ereignis jedes Mal aufrufen, wenn Sie auf die Seite klicken. Wenn Sie jedoch auf das Auswahl-Tag klicken, wird die Weitergabe gestoppt und nicht functionToCallOnBlur() aufgerufen.

1
Tomas

Ich habe die folgenden Ereignisse erhalten, indem ich die Anweisungen auf Ihrem JSFiddle zu dem Brief befolgte:

BODY, mousedown, STRONG
#document, mousedown, STRONG
window, mousedown, STRONG
SELECT, blur, SELECT
BODY, click, STRONG
#document, click, STRONG
window, click, STRONG

Dies sind alles Ereignisse, die ausgelöst wurden, als ich auf "HIER" geklickt habe, nachdem das Auswahlmenü bereits im Fokus und erweitert war. Dies war in der neuesten Version von Chrome.

Sollte eine davon für Ihre Zwecke nicht ausreichen?

Bearbeiten: Wenn Sie sicherstellen möchten, dass Ihr Select-Element den Fokus verliert, setzen Sie eine globale Javascript-Variable, 'selectFocused', und setzen Sie sie auf "False". Setzen Sie den Wert auf "True", wenn Ihr Auswahlmenü den Fokus erhält, und setzen Sie ihn auf "False", wenn eines der oben genannten Ereignisse auftritt. 'selectFocused' kann jetzt an beliebiger Stelle in Ihrem Code verwendet werden, um festzustellen, ob das Select-Element aktuell den Fokus hat oder nicht, und wenn es Werte ändert, wissen Sie, dass Ihr Select-Element ausgewählt oder nicht ausgewählt wurde.

1
sichinumi

Vorbedingung: Verwendung von jQuery! Dies wird wahrscheinlich nur einen Teil Ihres Problems lösen, aber wenn Sie nach einem Ereignis suchen, das ausgelöst wird, wenn Sie ein Element anklicken, können Sie ein Overlay-Div verwenden.

Wenn der Benutzer auf das Auswahlfeld klickt:

$('#mySelectBox').click(function () {
    var myOverlayDiv = $('<div id="overlayDiv" class="overlayDiv"></div>')
    .click(function () {
        // call your "select lost focus" function here
        // which should include $('#overlayDiv').remove() somewhere!
    })
    .show()
    .appendTo(document.body);
});

Stil für das Overlay-Div:

.overlayDiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
z-index:1000;
}

Sie müssen sicherstellen, dass Ihr Auswahlfeldmenü einen höheren Z-Index aufweist. Wenn der Benutzer auf das Menü klickt, wird das Menü und nicht das Overlay-Div angezeigt.

1
jbabey

Wenn wir erwägen, außerhalb der Auswahlbox zu klicken, kann dies ein Signal für das abschließende Auswahlereignis sein.

Die folgende jQuery kann dies tun. Hier ist Code in der Geige

$(function () {
    let flag = 0;

    $("#selectId").click(function (e) {
        e.stopPropagation();
        if (flag === 0) {
            flag = 1;
            $(document).one("click", function () {
                flag = 0;
                alert("select end");
            });
        }
    });
});

HTML Quelltext:

<select multiple id="selectId">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>

0
yuxin Zhang