在jQuery中拖动后阻止单击事件
我有一个带有click
事件的可拖动
,没有任何拖动事件。
但是在我拖动
,click事件将应用于
。
拖动后如何防止点击事件?
$(function(){ $('div').bind('click', function(){ $(this).toggleClass('orange'); }); $('div').draggable(); });
http://jsfiddle.net/prince4prodigy/aG72R/
我用data
和setTimeout
做了一个解决方案。 也许比帮助类更好。
和
$(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(); }
然后在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从事件中删除特定的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(); });