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

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

WBOY

Libérer： 2016-05-16 15:13:06

original

1952 Les gens l'ont consulté

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>

Copier après la connexion

Fonction ici :

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

Copier après la connexion

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

Copier après la connexion

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.