Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:13:06
original
1915 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.

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

Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!