Lösung für die Ausführung der jquery-Triggerfunktion zweimal

Lösung für die Ausführung der jquery-Triggerfunktion zweimal_jquery

WBOY

Freigeben： 2016-05-16 15:13:06

Original

1916 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Lösung für das Problem der zweimaligen Ausführung der JQuery-Triggerfunktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Die Fragen lauten wie folgt:

hat den folgenden Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}    
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('#old').bind("click", function(){
        $("input").trigger("focus");
    });
    $('#new').bind("click", function(){
      $("input").triggerHandler("focus");
    });
    $("input").focus(function(){
  $("body").append("<p>focus.</p>");
})
});
</script>
</head>
<body>
<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />
</body>
</html>

Nach dem Login kopieren

Funktion hier:

$('#old').bind("click", function(){
$("input").trigger("focus");
});

Nach dem Login kopieren

Wird in Firefox nur einmal ausgelöst, d. h. es wird ein Fokus ausgegeben

Aber es wird im IE zweimal ausgelöst, das heißt, es werden zwei Fokusse gleichzeitig ausgegeben

2. Lösung:

Analysieren Sie zunächst Trigger und TriggerHandler. Durch die Verwendung von „triggerHandler“ wird das Standardereignis des Browsers nicht ausgelöst und es kommt nicht zu einer Ereignisblase (weitere Unterschiede finden Sie in der jQuery-Dokumentation). Ein Ticket zu diesem Fehler. sich zu diesem Thema engagieren. jQuery selbst implementiert ein Ereignisobjekt, um Unterschiede zwischen Browsern aufzulösen. Aufgrund der Existenz nicht standardmäßiger Ereignisse wie Mouseenter/Mouseleave hat jQuery jedoch ein spezielles Ereignissubsystem eingeführt, um die Rückkehr nativer Ereignisse in die Ereigniswarteschlange simulierter Ereignisse zu ermöglichen. Dieses System kann jedoch nicht alle Probleme lösen .focus, Unter IE wird der Rückruf zweimal falsch ausgeführt.

triggerHandler ist eine Lösung für dieses Problem mit Triggern. Wenn Sie jedoch TriggerHandler verwenden, werden Sie feststellen, dass die Eingabe keinen Cursor-Fokus-Effekt hat.

Erste Lösung:

Zusätzlich zur Verwendung von triggerHandler besteht eine weitere Methode darin, Folgendes hinzuzufügen:

zum Fokusbindungsereignis

event.preventDefault()

Nach dem Login kopieren

Sie stellen jedoch fest, dass dies nicht unseren Erwartungen entspricht, da der Rückruf des Fokusereignisses ausgeführt wird, es jedoch keinen Fokuseffekt gibt.

Endgültige Lösung:

Da es von jQuery gekapselt ist, können wir nur native Ereignisse verwenden. In der Demo wird die linke Seite durch native Ereignisse ausgelöst und die rechte Seite verwendet TriggerHandler.