L'exemple de cet article décrit la solution au problème de l'exécution double de la fonction de déclenchement jquery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
1. Les questions sont les suivantes :
a le code suivant :
<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>
Fonction ici :
$('#old').bind("click", function(){ $("input").trigger("focus"); });
Déclenché une seule fois dans Firefox, c'est-à-dire qu'un focus est généré
Mais il est déclenché deux fois, c'est-à-dire que deux focus sont émis en même temps
;2.Solution :
Analysez d’abord le trigger et le triggerHandler. L'utilisation de triggerHandler ne déclenchera pas l'événement par défaut du navigateur et ne provoquera pas de bouillonnement d'événement (voir la documentation jQuery pour d'autres différences). Un ticket sur ce bug. s'engager sur cette question. jQuery lui-même implémente un objet événement pour résoudre les différences entre les navigateurs. Cependant, en raison de l'existence d'événements non standard tels que mouseenter/mouseleave, jQuery a introduit un sous-système d'événements spécial pour permettre aux événements natifs de revenir dans la file d'attente des événements simulés. Cependant, ce système ne peut pas résoudre tous les problèmes lors de l'utilisation du déclencheur. .focus, Sous IE, le rappel sera exécuté deux fois de manière incorrecte.
triggerHandler est une solution à ce problème avec les déclencheurs. Mais lorsque vous utilisez triggerHandler, vous constaterez que l'entrée n'a aucun effet de focus sur le curseur.
Solution initiale :
En plus d'utiliser triggerHandler, une autre méthode consiste à ajouter :
à l'événement de liaison focusevent.preventDefault()
Mais vous constatez que cela ne répond pas à nos attentes, car le rappel de l'événement focus est exécuté, mais il n'y a pas d'effet focus.
Solution finale :
Comme il est encapsulé par jQuery, nous pouvons simplement utiliser des événements natifs. En regardant la démo, le côté gauche est déclenché par des événements natifs et le côté droit utilise triggerHandler.
$('input')[0].focus();
Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets de glisser et des compétences JQuery", "Résumé des compétences de l'extension jQuery" , "Résumé des effets spéciaux classiques communs de JQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "jQuery plug-ins courants et résumé d'utilisation》
J'espère que cet article sera utile à tous ceux qui programment jQuery.