Teilen Sie die Lösung für den Konflikt zwischen JQuery Focusout und Click Events

Bei der Suche in der Mainstream-Suchmaschine werden bei der Eingabe von Inhalten häufig intelligente Eingabeaufforderungen eingeblendet. Das Eingabefeld ist eine Eingabe und der intelligente Eingabeaufforderungsbereich ist ein Vorschlag. Als nächstes gibt es im Allgemeinen zwei Vorgänge:

1. Wählen Sie eine Eingabeaufforderung aus, kopieren Sie den Inhalt in die Eingabe und schließen Sie den Vorschlag automatisch.

2. Klicken Sie auf eine andere Stelle auf der Webseite, um den Vorschlag automatisch zu schließen Anregung.

Um das erste zu implementieren, können Sie das Click--Ereignis verwenden, das Mausklick-Ereignis im Vorschlag hinzufügen, den angeklickten Inhalt während der Verarbeitung in die Eingabe schreiben und dann den Vorschlag schließen. Es gibt kein Problem, wenn es alleine getestet wird.

Um das zweite zu implementieren, können Sie ein Focusout-Ereignis oder ein Unschärfeereignis für das Eingabeelement hinzufügen und den Vorschlag schließen, wenn die Eingabe den Fokus verliert. Kein Problem, wenn man es alleine testet.

Beim Zusammensetzen tritt jedoch ein Problem auf. Es reagiert nur auf das Ereignis „Fokus verloren“ (der Vorschlag wird geschlossen), reagiert jedoch nicht auf das Inhaltsklickereignis (der Inhalt des angeklickten Vorschlags wird nicht abgerufen). .

Ich verstehe nicht, warum es einen Konflikt gibt. Ich habe online gesucht und einige ähnliche Probleme gefunden, aber Unschärfe ist dasselbe wie Focusout und keines davon funktioniert.

Nachdem ich darüber nachgedacht hatte, fielen mir plötzlich die Auslösebedingungen des Klickereignisses ein. Wenn Sie auf eine Schaltfläche klicken, wird ein Klickereignis ausgelöst, und ein Klick beinhaltet: Klicken und Loslassen der Maus. Das Klickereignis von jquery wird ausgelöst, nachdem die Maus losgelassen wurde (tatsächlich sind die Klickereignisse von Schaltflächenelementen und href-Elementen so, wenn Sie darüber nachdenken, werden Sie das Konfliktproblem verstehen). Wenn Sie auf einen bestimmten Tipp im Vorschlag klicken, wird zu diesem Zeitpunkt das Ereignis „Eingabe verliert den Fokus“ ausgelöst, wodurch der Vorschlagsbereich geschlossen wird und dann Ihre Maus losgelassen wird (die Reaktionsgeschwindigkeit des Computers ist schneller als die Geschwindigkeit beim Klicken und Loslassen der Maus). Der Klick ist abgeschlossen, aber zu diesem Zeitpunkt befindet sich die Maus nicht mehr in der Eingabeaufforderung zum Auswählen des Vorschlags, sodass das Klickereignis im Vorschlag nicht ausgelöst werden kann.

Nachdem ich das herausgefunden hatte, wurde das Problem in „Mousedown“ geändert, sodass es ausgelöst wird, wenn mit der Maus geklickt wird war erfolgreich. Das Mousedown-Ereignis und das Focusout-Ereignis wurden korrekt behandelt.

//input的丢失焦点事件  
$("#input_area").focusout(function(){  
    $("#suggest_div").hide();  
});  
  
//suggest区域的点击事件  
$("#suggest_div li").mousedown(function(){  
    $("#input_area").val($(this).text());  
    $("#suggest_div").hide();  
});

Klicken durch Mousedown zu ersetzen ist völlig in Ordnung. Es ist so einfach, dass es mir peinlich ist, es zu sagen, aber manchmal ist es nicht einfach, daran zu denken!

Darüber hinaus habe ich auch andere Methoden im Internet gefunden. Eine davon ist

$("#input_area").keypress(function() {  
    $("#suggest_div").slideDown();  
}).blur(function() {  
    $("#suggest_div").slideUp();  
});

Diese Methode verwendet versteckte Animationen , um Verzögerungen zu verursachen. Machen Sie das Klickereignis des Vorschlagsbereichs auslösbar. Slide ist jedoch nicht für alle Situationen geeignet und es ist nicht angemessen, den Erfolg der Funktion auf der Geschwindigkeit des Ausblendens von Animationen zu basieren.

Eine andere Methode besteht darin, die Eingabe und den Vorschlag in ein Div zu packen und das Ereignis direkt zum Div hinzuzufügen. Dies wurde nicht getestet, sollte aber theoretisch möglich sein.

Das obige ist der detaillierte Inhalt vonTeilen Sie die Lösung für den Konflikt zwischen JQuery Focusout und Click Events. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!