Comment distinguer la souris "clic" et "glisser"

Question

J'utilise jQuery.click pour gérer l'événement de clic de souris sur le graphe de Raphael, alors que je dois gérer l'événement de souris drag , le glissement de la souris consiste en mousedown , mouseup et mousemove à Raphaël.

Il est difficile de distinguer click et drag car click contient également mousedown & mouseup , comment distinguer souris "clic" & souris "glisser" puis en Javascript?

Answer 1

Je pense que la différence est qu’il existe un mousemove entre mousedown et mouseup en glissement, mais pas en un clic.

Vous pouvez faire quelque chose comme ça:

 var flag = 0;
var element = xxxx;
element.addEventListener("mousedown", function(){
    flag = 0;
}, false);
element.addEventListener("mousemove", function(){
    flag = 1;
}, false);
element.addEventListener("mouseup", function(){
    if(flag === 0){
        console.log("click");
    }
    else if(flag === 1){
        console.log("drag");
    }
}, false);
 

Answer 2

Si vous utilisez déjà jQuery:

 var $body = $('body');
$body.on('mousedown', function (evt) {
  $body.on('mouseup mousemove', function handler(evt) {
    if (evt.type === 'mouseup') {
      // click
    } else {
      // drag
    }
    $body.off('mouseup mousemove', handler);
  });
});