使用ES6类（无jQuery）

Question

我有一个可拖动<div>的{{1}}事件，没有任何拖动事件。

但在我拖动click后，点击事件将应用于<div>。

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

<div>

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

Answer 1

首先附加可拖动事件，然后点击事件：

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

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

Answer 2

使用ES6类（无jQuery）

要在没有jQuery帮助的情况下在javascript中实现这一点，您可以添加和删除事件处理程序。

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

flagged () {
    this.isScrolled = true;
}

这将停止事件中的所有事件

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

然后在一个接一个地触发mousedown和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从事件中删除特定的功能，而不是事件的整个功能集。

Answer 3

这应该有效：

$(function(){

    $('div').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('div').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        $(this).toggleClass('orange');
    }
});
});

DEMO

Answer 4

我使用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);
        }
    });
});

检查 fiddle 。

Answer 5

您可以在不拖动jQuery UI的情况下进行操作。仅使用常见的“ click”和“ dragstart”事件：

$('div').on('dragstart', function (e) {
  e.preventDefault();
  $(this).data('dragging', true);
}).on('click', function (e) {
  if ($(this).data('dragging')) {
    e.preventDefault();
    $(this).data('dragging', false);
  }
});

Answer 6

您可以在draggable上检查jQuery UI的ui-draggable-dragging类。如果它在那里，不要继续点击事件，否则，做。 jQuery UI处理此类的设置和删除，因此您不必这样做。：）

<强>代码：

$(function(){
    $('div').bind('click', function(){
        if( $(this).hasClass('ui-draggable-dragging') ) { return false; }
        $(this).toggleClass('orange');
    });

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

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

6 个答案:

使用ES6类（无jQuery）

结论