在jQuery中拖动后阻止点击事件

Question

我有一个可拖动<div>的click事件,没有任何拖动事件.

但是我拖动后<div>点击事件适用于<div>.

拖动后如何防止点击事件？

$(function(){
    $('div').bind('click', function(){
        $(this).toggleClass('orange');
    });

    $('div').draggable();
});

http://jsfiddle.net/prince4prodigy/aG72R/

Answer 1

首先附加可拖动事件,然后点击事件:

$(function(){
    $('div').draggable();
    $('div').click(function(){
        $(this).toggleClass('orange');
    });
});

在这里试试:http: //jsfiddle.net/aG72R/55/

Answer 2

我用data和做了一个解决方案setTimeout。也许比助手类更好。

<div id="dragbox"></div>

和

$(function(){
    $('#dragbox').bind('click', function(){
        if($(this).data('dragging')) return;
        $(this).toggleClass('orange');
    });

    $('#dragbox').draggable({
        start: function(event, ui){
            $(this).data('dragging', true);
        },
        stop: function(event, ui){
            setTimeout(function(){
                $(event.target).data('dragging', false);
            }, 1);
        }
    });
});

检查小提琴。

Answer 3

使用ES6类（无jQuery）

要在没有jQuery帮助的情况下使用javascript实现此目的，您可以添加和删除事件处理程序。

首先创建将添加和删除事件监听器的函数

flagged () {
    this.isScrolled = true;
}

这可以停止某个事件中的所有事件

preventClick (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
}

然后，当mousedownand mousemove事件一个接一个触发时，添加标记。

element.addEventListener('mousedown', () => {
    element.addEventListener('mousemove', flagged);
});

请记住将其移到鼠标上，以免在该元素上发生大量事件。

element.addEventListener('mouseup', () => {
    element.removeEventListener('mousemove', flagged);
});

最后，在mouseup元素上的事件内，我们可以使用标志逻辑来添加和删除点击。

element.addEventListener('mouseup', (e) => {
    if (this.isScrolled) {
        e.target.addEventListener('click', preventClick);
    } else {
        e.target.removeEventListener('click', preventClick);
    }
    this.isScrolled = false;
    element.removeEventListener('mousemove', flagged);
});

在上面的示例中，我以点击的真实目标为目标，因此，如果这是滑块，我将以图像为目标，而不是主图库element。定位主要对象element只需像这样更改添加/删除事件侦听器。

element.addEventListener('mouseup', (e) => {
    if (this.isScrolled) {
        element.addEventListener('click', preventClick);
    } else {
        element.removeEventListener('click', preventClick);
    }
    this.isScrolled = false;
    element.removeEventListener('mousemove', flagged);
});

结论

通过将匿名函数设置为const，我们不必绑定它们。同样，通过这种方式，它们具有“句柄”，允许s从事件中删除特定功能，而不是事件中的整个功能集。