jQuery: une question sur les événements

Question

Comment puis-je faire avec jQuery pour qu'un événement mousemove ne soit actif que si le bouton gauche de la souris est maintenu enfoncé, et dès que le bouton est relâché, l'événement mousemove s'arrête?

Answer 1

La manière la plus simple est de conserver un drapeau, qui est défini sur vrai seulement pendant que le bouton gauche est maintenu enfoncé. Cela signifie que vous devez le définir sur true lorsque le bouton gauche de la souris est enfoncé et le réinitialiser sur false lorsqu'il est relâché. Alors vous agissez sur mousemove seulement si ce drapeau est vrai.

Ce n'est pas une solution spécifique à jQuery, mais un modèle générique pour des problèmes comme celui-ci, donc jQuery pourrait fournir une meilleure solution.

Vous devrez peut-être prendre en charge des cas spéciaux, tels que la perte du focus d'entrée ou le déplacement du curseur de la souris en dehors de ce div tandis que le bouton gauche est maintenu enfoncé.

Answer 2

Ici, je lie l'événement mousemove sur mousedown, et je le délie sur mouseup. J'ai utilisé une fonction sympa dans jQuery pour que d'autres événements mousemove puissent être ajoutés à ce sélecteur, mais seul celui que vous souhaitez annuler est supprimé. Ils sont appelés Namespaced Events.

$("#yourdivid").mousedown(function(e){ 
    if(e.which == 1){ 
     $(this).bind('mousemove.coolnamespace', function(e){ 
      // Your mousemove event 
     }); 
    } 
}).mouseup(function(e){ 
    if(e.which == 1) $(this).unbind('mousemove.coolnamespace'); 
}) 

Edit: Je mis à jour ma réponse à utiliser le champ normalisé which. jQuery normalise ceci à 1 = Gauche, 2 = Moyen, 3 = Droite. La valeur button sera différente selon le navigateur.

Answer 3

Vous liez l'événement mousedown et appelez mousemove à l'intérieur de cette fonction, et utilisez l'événement jQuery unbind pour vous débarrasser de la souris;

var $button = $("ELEMENT HERE");

 $button.mousedown(function(){ 
      $(this).mousemove(function(){ 
       //Events here 
      }); 
     }).mouseup(function(){ 
      $(this).unbind("mousemove"); 
     });