如何避免可拖动的jQuery UI也触发click事件(how to avoid jQuery UI draggable from also triggering click event)

75 IT屋

A have a large div (a map) that is draggable via jQuery UI draggable. The div has child divs which are clickable.

My problem is that if you drag the map, on mouse up, the click event is fired on whatever child div you started the drag from.

How do I stop the mouse up from triggering the click event if its part of a drag (as opposed to someone just clicking without a drag, in which case the click event is desired).

解决方案
$('.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(); } );
    }
});

This works because "one-listeners" are fired before "normal" listeners. So if a one-listener stops propagation, it will never reach your previously set listeners.

A具有可通过jQuery UI拖动的大div(地图)。 div有可单击的子div。



我的问题是,如果将地图拖动到鼠标上方,则在您启动的任何子div上都会触发click事件



如果拖动是鼠标拖动的一部分,我该如何阻止鼠标触发click事件(与没有拖动而单击的人相反)


解决方案
  $('。selector')。draggable ({
stop:function(event,ui){
// event.toElement是负责
//触发此事件的元素。如果是可拖动的,则为句柄。
$(event.originalEvent.target).one('click',function(e){e.stopImmediatePropagation();});
}
});


之所以有效,是因为在之前将一个听众 开除 正常 侦听器。因此,如果一个监听器停止传播,它将永远无法到达您先前设置的监听器。


本文地址:IT屋 » 如何避免可拖动的jQuery UI也触发click事件