recherche

Maison >interface Web >js tutoriel >Solution à la fonction de déclenchement jquery exécutée deux fois_jquery

Solution à la fonction de déclenchement jquery exécutée deux fois_jquery

WBOY
WBOYoriginal
2016-05-16 15:13:061953parcourir

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 focus 
event.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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：10 plug-ins Sublime Text indispensables pour les développeurs JavaScript_javascript skillsArticle suivant：10 plug-ins Sublime Text indispensables pour les développeurs JavaScript_javascript skills

Articles Liés

Voir plus