Bestellproblem bei onclick () und onblur ()

Ich habe ein Eingabefeld, das ein benutzerdefiniertes Dropdown-Menü aufruft. Ich möchte die folgende Funktionalität:

• Wenn der Benutzer irgendwo außerhalb des Eingabefelds klickt, sollte das Menü entfernt werden.
• Wenn der Benutzer im Menü auf ein Div klickt, sollte das Menü entfernt werden, und es sollte eine spezielle Verarbeitung erfolgen, die darauf basiert, auf welches Div geklickt wurde.

Hier ist meine Implementierung:

Das Eingabefeld enthält ein onblur()Ereignis, das das Menü löscht (indem die übergeordneten Elemente innerHTMLauf eine leere Zeichenfolge gesetzt werden), wenn der Benutzer außerhalb des Eingabefelds klickt. Die Divs im Menü haben auch onclick()Ereignisse, die die spezielle Verarbeitung ausführen.

Das Problem ist, dass die onclick()Ereignisse niemals ausgelöst werden, wenn auf das Menü geklickt wird, da das Eingabefeld onblur()zuerst ausgelöst wird und das Menü einschließlich des onclick()s!

Ich habe das Problem gelöst, indem ich die Menü-Divs onclick()in onmousedown()und onmouseup()Ereignisse aufgeteilt und ein globales Flag bei gedrückter Maus gesetzt habe, das mit der Maus nach oben gelöscht wird, ähnlich wie in dieser Antwort vorgeschlagen . Da onmousedown()zuvor ausgelöst wurde onblur(), wird das Flag gesetzt, onblur()wenn auf eines der Menü-Divs geklickt wurde, nicht jedoch, wenn es sich an einer anderen Stelle auf dem Bildschirm befand. Wenn auf das Menü geklickt wurde, kehre ich sofort zurück, onblur()ohne das Menü zu löschen, und warte dann, onclick()bis das Menü ausgelöst wird. An diesem Punkt kann ich das Menü sicher löschen.

Gibt es eine elegantere Lösung?

Der Code sieht ungefähr so ​​aus:

<div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div>
<input id="input" onblur="removeMenu()" ... />

var mouseflag;

function setFlag() {
    mouseflag = true;
}

function removeMenu() {
    if (!mouseflag) {
        document.getElementById('menu').innerHTML = '';
    }
}

function doProcessing(id, name) {
    mouseflag = false;
    ...
}

Ich hatte genau das gleiche Problem wie Sie. Meine Benutzeroberfläche ist genau so gestaltet, wie Sie es beschreiben. Ich habe das Problem gelöst, indem ich einfach onClickdie Menüpunkte durch eine ersetzt habe onMouseDown. Ich habe nichts anderes getan; Nein onMouseUp, keine Fahnen. Dies löste das Problem, indem der Browser automatisch nach der Priorität dieser Ereignishandler neu geordnet wurde, ohne dass ich zusätzliche Arbeit leisten musste.

Gibt es einen Grund, warum dies nicht auch für Sie funktioniert hätte?

onClicksollte nicht durch ersetzt werden onMouseDown.

Während dieser Ansatz etwas funktioniert , handelt es sich bei den beiden Ereignissen um grundlegend unterschiedliche Ereignisse, die in den Augen des Benutzers unterschiedliche Erwartungen haben. Die Verwendung von onMouseDownanstelle von onClickwird in diesem Fall die Vorhersehbarkeit Ihrer Software beeinträchtigen. Somit sind die beiden Ereignisse nicht austauschbar.

Zur Veranschaulichung: Wenn Benutzer versehentlich auf eine Schaltfläche klicken, können sie den Mausklick gedrückt halten, den Cursor außerhalb des Elements ziehen und die Maustaste loslassen, was letztendlich zu keiner Aktion führt. onClickmacht dies. onMouseDownDer Benutzer kann die Maus nicht gedrückt halten und löst stattdessen sofort eine Aktion aus, ohne dass der Benutzer darauf zurückgreifen muss. onClickist der Standard, nach dem wir erwarten, Aktionen auf einem Computer auszulösen.

Rufen Sie in dieser Situation event.preventDefault()die onMouseDownVeranstaltung auf. onMouseDownverursacht standardmäßig ein Unschärfeereignis und tut dies nicht, wenn preventDefaultes aufgerufen wird. Dann onClickhaben Sie die Chance, angerufen zu werden. Ein Unschärfeereignis wird immer noch auftreten, erst danach onClick.

Schließlich ist das onClickEreignis eine Kombination aus onMouseDownund onMouseUp, wenn und nur wenn beide innerhalb desselben Elements auftreten.

Ersetzen onmousedowndurch onfocus. Dieses Ereignis wird also ausgelöst, wenn sich der Fokus innerhalb des Textfelds befindet.

Ersetzen onmouseupdurch onblur. Sobald Sie Ihren Fokus aus dem Textfeld entfernen, wird onblur ausgeführt.

Ich denke, das ist es, was du vielleicht brauchst.

UPDATE :

Wenn Sie Ihre Funktion onfocus ausführen -> entfernen Sie die Klassen, die Sie in onblur anwenden möchten, und fügen Sie die Klassen hinzu, die onfocus ausgeführt werden sollen

und

Wenn Sie Ihre Funktion onblur ausführen -> entfernen Sie die Klassen, die Sie in onfocus anwenden möchten, und fügen Sie die Klassen hinzu, die onblur ausgeführt werden sollen

Ich sehe keine Notwendigkeit für Flag-Variablen.

UPDATE 2:

Sie können die Ereignisse onmouseout und onmouseover verwenden

onmouseover - Erkennt, wenn sich der Cursor darüber befindet.

onmouseout - Erkennt, wann der Cursor geht.

Eine elegantere (aber wahrscheinlich weniger performante) Lösung:

Anstatt die Onblur der Eingabe zu verwenden, um das Menü zu entfernen, verwenden Sie document.onclick, was danach ausgelöst wird onblur.

Dies bedeutet jedoch auch, dass das Menü entfernt wird, wenn auf die Eingabe selbst geklickt wird. Dies ist ein unerwünschtes Verhalten. Setzen Sie ein input.onclickmit event.stopPropagation(), um zu vermeiden, dass Klicks auf das Dokumentklickereignis übertragen werden.

Ändern Sie onclick durch onfocus

auch wenn onblur und onclick nicht sehr gut miteinander auskommen, aber offensichtlich onfocus und ja onblur. da auch nach dem Schließen des Menüs der Onfocus für das darin angeklickte Element weiterhin gültig ist.

Ich habe es getan und es hat funktioniert.

Sie können eine setIntervalFunktion in Ihrem onBlurHandler wie folgt verwenden:

<input id="input" onblur="removeMenu()" ... />

function removeMenu() {
    setInterval(function(){
        if (!mouseflag) {
            document.getElementById('menu').innerHTML = '';
        }
    }, 0);
}

Die setIntervalFunktion entfernt Ihre onBlur Funktion aus dem Aufrufstapel. Fügen Sie hinzu, da Sie die Zeit auf 0 gesetzt haben. Diese Funktion wird sofort aufgerufen, nachdem ein anderer Ereignishandler beendet wurde