Wie unterscheidet man zwischen Klick- und Drag/Drop-Event?

Question

Ich habe ein Problem mit Element, das sowohl ziehbar ist als auch ein Klickereignis hat.

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

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

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

Wenn ich das Element ziehe und ablege, wird auch das click -Ereignis ausgelöst. Wie verhindere ich das?

Answer 1

Auch Sie könnten wahrscheinlich etwas mit den mousemove- und mousedown- Ereignisse zusammen das Click-Ereignis zu deaktivieren:

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

Sie sollten dies tun können, indem Sie die Weitergabe beim mousedown-Ereignis anhalten.

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

Möglicherweise müssen Sie sicherstellen, dass dieses Ereignis jedoch vor dem Klickereignis angefügt ist.

Answer 3

Ich habe bemerkt, dass, wenn der Drag-Ereignis vor registriert wird, beschrieben Ereignis dann das Problem klicken nicht passieren . Hier ist ein Beispiel-Code:

Dieser Code erstellen Sie das erwähnte Problem:

 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); 

dieser Code erstellen nicht das Problem:

 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

In meinem Fall gewählte Antwort nicht gearbeitet hat. So, hier ist meine Lösung, die richtig funktionierte (kann für jemanden nützlich sein):

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

Es ist in Ordnung, aber man sollte alle Tage erinnern, dass Benutzer die Maus leicht während des Klick bewegen kann und nicht, dass bemerken. Also würde er denken, dass er geklickt hat und Sie - dass er