代码之家 › 专栏 › 技术社区 › Richard Knop

如何区分单击和拖放事件?

jquery javascript

Richard Knop · 技术社区 · 15 年前

我有一个元素的问题,它既可拖动,也有一个单击事件。

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

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

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

当我拖放元素时,click事件也会被触发。如何预防?

5 回复 | 直到 15 年前

user520116user520116 15 年前

此外,您还可以对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;
)};

wajiw 15 年前

您应该可以通过停止mousedown事件上的传播来做到这一点。

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

但是,您可能必须确保在单击事件之前附加了此事件。

Abhishek Sachan 11 年前

在我的情况下,选择的答案不起作用。下面是我的解决方案,它运行正常(可能对某些人有用):

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

Gilad 12 年前

我注意到,如果在单击事件之前注册了拖动事件,则不会发生所描述的问题。下面是一个示例代码:

此代码会产生上述问题:

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

Katya Pavlenko 10 年前

没关系,但你应该永远记住,用户可以在点击时稍微移动鼠标,而不会注意到这一点。所以他会认为你被他拖走了