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

Posted 2023-05-08

【中文标题】在jQuery中拖动后防止点击事件

【英文标题】：Prevent click event after drag in jQuery

【发布时间】：2013-08-04 14:58:21

【问题描述】：

我有一个可拖动的 <div> 带有一个 click 事件并且没有任何拖动事件， 但在我拖动<div> 后，点击事件适用于<div>。

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

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

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

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

【问题讨论】：

这可能会有所帮助：***.com/questions/3486760/…

- 注意加载时 div 的 x 和 y 位置。 - 检查 div 是否已移动 - 如果是，请删除您分配的样式

查看我的解决方案（比这个线程中的任何一个都容易）***.com/a/58836706/5934567

【参考方案1】：

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

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

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

【讨论】：

这是最好的答案，imo。

这应该是公认的解决方案，这就是它的工作方式。演示：jsfiddle.net/dAL5v

【参考方案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 从事件中删除特定函数，而不是事件中的整个函数集。

【讨论】：

来自我在 *** 上搜索的所有 10 个链接，以及所有测试时间。这是唯一可行的解​​决方案..因为我没有像其他人一样使用 jquery...非常感谢！

谢谢对我很有用！我在我的轻量级 JS 滑块上实现了它github.com/hrsetyono/hSlider

【参考方案3】：

我用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。

【参考方案4】：

这应该可行：

$(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

【参考方案5】：

您可以在没有 jQuery UI 可拖动的情况下做到这一点。只需使用常见的“点击”和“拖动启动”事件：

$('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);
  
);

【参考方案6】：

您可以在可拖动对象上检查 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();
);

【讨论】：

我没有看到那堂课