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

我有一个带有click事件的可拖动

,没有任何拖动事件。

但是在我拖动

,click事件将应用于

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

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

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

我用datasetTimeout做了一个解决方案。 也许比帮助类更好。

 

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

检查小提琴

首先附加可拖动事件,然后点击事件:

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

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

使用ES6类(没有jQuery)

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

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

 flagged () { this.isScrolled = true; } 

这将停止一个事件的所有事件

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

然后在mousedownmousemove事件被一个接一个地触发时添加标志。

 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从事件中删除特定的function,而不是事件的整个function集。

这应该工作:

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

您可以在ui-draggable-dragging检查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(); });