Question

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

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

如果拖拽的一部分（如果只是点击没有拖动，则需要点击事件），如何阻止鼠标触发点击事件。

Answer 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”在 “普通”侦听器之前被触发。因此，如果一个监听器停止传播，它将永远不会到达您之前设置的监听器。

Answer 2

我遇到了这个问题，解决方案是在click事件处理程序之前应用可拖动事件处理程序。我正在移动一些代码并突然遇到这个问题。我终于意识到我已经改变了应用处理程序的顺序。当我将其切换回来时，事情再次开始正常工作 - 拖动不会导致点击。

Answer 3

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

Answer 4

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

jQuery UI Draggable API

如何避免jQuery UI可拖动也触发click事件

4 个答案: