¿Cómo diferenciar entre hacer clic y arrastrar/soltar evento?

Question

Tengo un problema con un elemento que se puede arrastrar y también tiene un evento de clic.

$('.drag').mousedown(function() { 
    //... 
}); 

$('.class').click(function() { 
    //... 
)}; 

<div class="drag class"></div> 

Cuando arrastro y suelto el elemento, también se desencadena el evento de clic. ¿Cómo prevenir eso?

Answer 1

también que probablemente se podría hacer algo con los eventos mousemove y mousedown juntos para desactivar el evento click:

var dragging = 0; 

$('.drag').mousedown(function() { 
    $(document).mousemove(function(){ 
     dragging = 1; 
    }); 
}); 

$(document).mouseup(function(){ 
    dragging = 0; 
    $(document).unbind('mousemove'); 
}); 

$('.class').click(function() { 
    if (dragging == 0){ 
     // default behaviour goes here 
    } 
    else return false; 
)}; 

Answer 2

Debería poder hacer eso al detener la propagación en el evento mousedown.

$('.drag').mousedown(function(event){ 
    event.stopPropagation(); 
}); 

Sin embargo, es posible que deba asegurarse de que este evento esté conectado antes del evento click.

Answer 3

me di cuenta que si el evento de arrastre se ha registrado antes del evento click a continuación, el problema descrito no ocurrirá . He aquí un ejemplo de código:

Este código crea el problema mencionado:

 var that = this; 
     var btnId = "button_" + this.getId(); 
     var minView = $("<div>", {"id":btnId, style:"position:absolute; top:" 
      + this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"}); 
     minView.html(this.getMinimizedTitle()); 

     minView.click(function expendWidget(event) { 
      $("#" + btnId).remove(); 
      that.element.css({"left":that.options.style.left, "right":that.options.style.right}); 
      that.element.show(); 
     }); 

     minView.draggable(); 
     minView.on("drag", this.handleDrag.bind(this)); 

     this.element.parent().append(minView); 

este código no crea el problema:

respuesta

 var that = this; 
     var btnId = "button_" + this.getId(); 
     var minView = $("<div>", {"id":btnId, style:"position:absolute; top:" 
      + this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"}); 
     minView.html(this.getMinimizedTitle()); 

     minView.draggable(); 
     minView.on("drag", this.handleDrag.bind(this)); 

     minView.click(function expendWidget(event) { 
      $("#" + btnId).remove(); 
      that.element.css({"left":that.options.style.left, "right":that.options.style.right}); 
      that.element.show(); 
     }); 
     this.element.parent().append(minView); 

Answer 4

En mi caso seleccionado no funcionó. Así que aquí está mi solución que funcionaba correctamente (puede ser útil para alguien):

var dragging = 0; 
    $(document).mousedown(function() { 
     dragging = 0; 
     $(document).mousemove(function(){ 
      dragging = 1; 
     }); 
    }); 

    $('.class').click(function(e) { 
     e.preventDefault(); 
     if (dragging == 0){ 
      alert('it was click'); 
     } 
     else{ 
      alert('it was a drag'); 
     } 
    }); 

Answer 5

Está bien, pero hay que recordar todos los días, que el usuario puede mover el ratón ligeramente durante el clic y no se dan cuenta de eso. Entonces él pensaría que hizo clic y usted - que arrastró