Javascript 如何区分单击和拖放事件？

我对元素有一个问题，它既可以拖动，也有一个点击事件

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

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

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

$（'.drag'）.mousedown（函数（）{
//...
});
$（'.class'）。单击（函数（）{
//...
)};

---

当我拖放元素时，click事件也会被触发。如何防止这种情况发生？

您应该能够通过停止mousedown事件的传播来做到这一点

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

---

您可能必须确保在单击事件之前已附加此事件。

此外，您可能还可以同时使用mousemove和mousedown事件来禁用单击事件：

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

---

我注意到，如果拖动事件是在单击事件之前注册的，那么描述的问题就不会发生。下面是一个示例代码：

此代码创建了所提到的问题：

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

var=this；
var btnId=“button_”+this.getId（）；
var minView=$（“”，{“id”：btnId，样式：“位置：绝对；顶部：”
+this.options.style.top+“左：”+this.options.style.left+“边框：1px纯色灰色；填充：2px“}）；
html（this.getminimizeditle（））；
minView.click（函数）窗口小部件（事件）{
$（“#”+btnId）.remove（）；
css（{“left”：that.options.style.left，“right”：that.options.style.right}）；
that.element.show（）；
});
minView.draggable（）；
minView.on（“拖动”，this.handleDrag.bind（this））；
this.element.parent（）.append（minView）；

此代码不会产生以下问题：

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

var=this；
var btnId=“button_”+this.getId（）；
var minView=$（“”，{“id”：btnId，样式：“位置：绝对；顶部：”
+this.options.style.top+“左：”+this.options.style.left+“边框：1px纯色灰色；填充：2px“}）；
html（this.getminimizeditle（））；
minView.draggable（）；
minView.on（“拖动”，this.handleDrag.bind（this））；
minView.click（函数）窗口小部件（事件）{
$（“#”+btnId）.remove（）；
css（{“left”：that.options.style.left，“right”：that.options.style.right}）；
that.element.show（）；
});
this.element.parent（）.append（minView）；

在我的案例中，选择的答案不起作用。下面是我的解决方案，它工作正常（可能对某些人有用）：

---

没关系，但你应该永远记住，用户可以在点击过程中轻轻移动鼠标，但不会注意到这一点。所以他会认为hi点击了，而你——在我的情况下，他拖动

可能会帮助你。我正在使用一个光滑的旋转木马，它需要可拖动，但也可以单击其中的幻灯片。使用该事件将禁用可拖动

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