如何避免jQuery UI可拖动也触发点击事件[重复]

Posted 2023-05-08

【中文标题】如何避免jQuery UI可拖动也触发点击事件[重复]

【英文标题】：how to avoid jQuery UI draggable from also triggering click event [duplicate]

【发布时间】：2011-03-30 01:01:24

【问题描述】：

A 有一个可通过 jQuery UI 可拖动的大 div（地图）。该 div 具有可点击的子 div。

我的问题是，如果您拖动地图，在鼠标向上时，点击事件会在您开始拖动的任何子 div 上触发。

如果鼠标是拖动的一部分，我如何阻止鼠标触发点击事件（而不是有人只是点击而不拖动，在这种情况下需要点击事件）。

【问题讨论】：

我遇到了同样的问题，并找到了一个简单的解决方案。在子元素上定义draggable 在click 之前，像这样：$('element').draggable(disabled: true);

【参考方案1】：

$('.selector').draggable(
    stop: function(event, ui) 
        // event.toElement is the element that was responsible
        // for triggering this event. The handle, in case of a draggable.
        $( event.originalEvent.target ).one('click', function(e) e.stopImmediatePropagation();  );
    
);

这是因为 "one-listeners" 在 "normal" 监听器之前触发。因此，如果一个监听器停止传播，它将永远无法到达您之前设置的监听器。

【讨论】：

jsfiddle.net/qYz9V/2 这是这个答案的关键:) 谢谢。

小提琴显示它正在工作，但由于某种原因它不适合我......

此解决方案在 FF 31 中不起作用，event.toElement 未定义。然而，而不是 event.toElement 使用 event.originalEvent.target 将在所有浏览器中工作

如果点击事件附加到孩子身上，这不起作用。

这可以防止下一次真正点击目标。我必须双击才能再次点击。

【参考方案2】：

我遇到了这个问题，解决方案是在单击事件处理程序之前应用可拖动事件处理程序。我正在移动一些代码，突然遇到了这个问题。我终于意识到我已经改变了应用处理程序的顺序。当我把它切换回来时，一切又开始正常工作了——拖动并没有引起点击。

【讨论】：

Arghh，我一直在尝试解决此问题，希望您的解决方案对我有用。但事实并非如此。我在 jQuery 1.6.1

为我工作！比所有诡计多端的其他答案要好得多。

这些都不适合我 :-(

像魅力一样为我工作，请务必在单击事件之前设置可拖动事件，例如mentiened ...谢谢您的解决方案：D

7年后依然如此！ :-)

【参考方案3】：

您是否可以在开始拖动时设置一个变量，例如“justDragged = true”，然后在 mouseUp 事件上检查此变量，如果为 true，请将其设置为 false，然后执行 event.preventDefault + return w/o任何事物。这样它会跳过拖动后的第一次单击。看起来有点老套，也许其他人会有更优雅的解决方案。

【参考方案4】：

另一种方法是根本不允许从可拖动区域内的可点击区域拖动：

jQuery UI Draggable API

【讨论】：

想解释反对意见吗？