Heim > Artikel > Web-Frontend > Lösung für die Ausführung der jquery-Triggerfunktion zweimal_jquery

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

WBOYOriginal: 2016-05-16 15:13:061916Durchsuche

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>

Funktion hier:

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

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()

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.

$('input')[0].focus();

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung des JQuery-Selektors“ und „jQuery Allgemeine Plug-Ins und Nutzungsübersicht》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：10 unverzichtbare Sublime Text-Plug-Ins für JavaScript-Entwickler_Javascript-KenntnisseNächster Artikel：10 unverzichtbare Sublime Text-Plug-Ins für JavaScript-Entwickler_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen