Comment remplacer un gestionnaire d'événements par jQuery?

J'ai un site qui utilise AJAX pour naviguer. J'ai deux pages sur lesquelles j'utilise un clic et une fonction de glisser en utilisant

$(".myDragArea").mousedown(function(){ do stuff... mouseDrag = true; // mouseDrag is global. }); $("body").mousemove(function(){ if (mouseDrag) { do stuff... } }); $("body").mouseup(function(){ if (mouseDrag) { do stuff... mouseDrag = false; } });

Je viens de taper ça, excusez-moi des erreurs de syntaxe accidentelles. Deux parties du site utilisent un code presque identique, la seule différence étant celle de la fonction $("body").mouseup() . Cependant, si j'habite à la première partie, accédez à la deuxième partie, le code qui tourne sur la souris ne change pas. J'ai franchi le code avec un firebug, et je n'ai pas d'erreur ou je l'ai lancé quand $("body").mouseup() est exécuté lorsque la deuxième partie est $("body").mouseup() .

Alors, pourquoi le gestionnaire d'événements ne change-t-il pas lorsque je cours $("body").mouseup() la deuxième fois?

En appelant $("body").mouseup(function) ajoutera un gestionnaire d'événements.
Vous devez supprimer le gestionnaire existant en écrivant $("body").unbind('mouseup'); .

En utilisant $("body").mouseup( ... ) ajoutera un gestionnaire d'événements pour le corps déclenché à la souris.

Si vous souhaitez ajouter un autre gestionnaire d'événements qui entrerait en conflit avec le (s) gestionnaire (s) actuel (s) d'événements, vous devez d'abord supprimer le ou les gestionnaires d'événements en conflit actuels.

Vous disposez de 4 options pour cela avec .unbind () . Je les énumérerai des options les moins précises aux plus précises:

Nuclear option – Supprimez tous les gestionnaires d'événements du body
```
 $("body").unbind(); 
```
C'est assez grossier. Essayons d'améliorer.
The elephant gun – Supprime tous les mouseup événements mouseup du body
```
 $("body").unbind('mouseup'); 
```
C'est un peu mieux, mais nous pouvons encore être plus précis.

The surgeon's scalpel – Supprimez un gestionnaire d'événements spécifique du body

 $("body").unbind('mouseup', myMouseUpV1);

Bien sûr, pour cette version, vous devez définir une variable sur votre gestionnaire d'événements. Dans votre cas, cela ressemblerait à:

 myMouseUpV1 = function(){ if (mouseDrag) { do stuff... mouseDrag = false; } } $("body").mouseup(myMouseUpV1); $("body").unbind('mouseup', myMouseUpV1); $("body").mouseup(myMouseUpV2); // where you've defined V2 somewhere

Scalpel with anesthesia (ok, l'usure de l'analogie est mince) – Vous pouvez créer des espaces de noms pour les gestionnaires d'événements que vous liez et sans attacher. Vous pouvez utiliser cette technique pour lier et détacher des fonctions anonymes ou des références aux fonctions. Pour les espaces de noms, vous devez utiliser la méthode .bind() directement au lieu d'un des raccourcis (comme .mouseover() ).
Pour créer un espace de noms:
```
 $("body").bind('mouseup.mySpace', function() { ... }); 
```
ou
```
 $("body").bind('mouseup.mySpace', myHandler); 
```
Ensuite, pour détacher l'un des exemples précédents, vous utiliserez:
```
 $("body").unbind('mouseup.mySpace'); 
```
Vous pouvez déconnecter simultanément plusieurs gestionnaires de pistes de noms en les chaînant:
```
 $("body").unbind('mouseup.mySpace1.mySpace2.yourSpace'); 
```
Enfin, vous pouvez déconnecter tous les gestionnaires d'événements dans un espace de noms quel que soit le type d'événement!
```
 $("body").unbind('.mySpace') 
```
Vous ne pouvez pas le faire avec une simple référence à un gestionnaire. $("body").unbind(myHandler) ne fonctionnera pas , car avec une simple référence à un gestionnaire, vous devez spécifier le type d'événement ( $("body").unbind('mouseup', myHandler) )!

PS: Vous pouvez également débrancher un événement de lui-même à l'aide de .unbind(event) . Cela pourrait être utile si vous souhaitez déclencher un gestionnaire d'événements uniquement un nombre limité de fois .

 var timesClicked = 0; $('input').bind('click', function(event) { alert('Moar Cheezburgerz!'); timesClicked++; if (timesClicked >= 2) { $('input').unbind(event); $('input').val("NO MOAR!"); } });

JQUery ne remplace pas les gestionnaires d'événements lorsque vous téléchargez les gestionnaires.

Si vous utilisez Ajax pour naviguer, et ne pas rafraîchir le DOM général (c'est-à-dire ne pas créer un élément de corps entièrement nouveau sur chaque demande), puis exécutez une nouvelle ligne comme:

 $("body").mouseup(function(){

Va simplement ajouter un gestionnaire supplémentaire . Votre premier gestionnaire continuera d'exister.

Vous devrez supprimer spécifiquement tous les gestionnaires en appelant

 $("body").unbind("mouseUp");