javascript 在jQuery中拖动后防止单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18032136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
prevent click event after drag in jQuery
提问by Sara Goodarzi
I have a draggable <div>with a clickevent and without any event for drag.
我有一个<div>带有click事件的可拖动对象，但没有任何拖动事件。
but after i drag <div>the click event is apply to <div>.
但是在我拖动<div>单击事件后，它适用于<div>.
how can prevent of click event after drag?
拖动后如何防止单击事件？
$(function(){
$('div').bind('click', function(){
$(this).toggleClass('orange');
});
$('div').draggable();
});
采纳答案by MightyPork
I made a solution with dataand setTimeout. Maybe better than helper classes.
我用data和做了一个解决方案setTimeout。也许比助手类更好。
<div id="dragbox"></div>
and
和
$(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);
}
});
});
Check the fiddle.
检查小提琴。
回答by Simon Steinberger
FIRST attach the draggable event, THEN the click event:
首先附加可拖动事件，然后附加点击事件：
$(function(){
$('div').draggable();
$('div').click(function(){
$(this).toggleClass('orange');
});
});
Try it here: http://jsfiddle.net/aG72R/55/
在这里试试：http: //jsfiddle.net/aG72R/55/
回答by Joe Lloyd
With an ES6 class (No jQuery)
使用 ES6 类（无 jQuery）
To achieve this in javascript without the help of jQuery you can add and remove an event handler.
要在没有 jQuery 帮助的情况下在 javascript 中实现这一点，您可以添加和删除事件处理程序。
First create functions that will be added and removed form event listeners
首先创建将添加和删除表单事件侦听器的函数
flagged () {
this.isScrolled = true;
}
and this to stop all events on an event
这可以停止事件中的所有事件
preventClick (event) {
event.preventDefault();
event.stopImmediatePropagation();
}
Then add the flag when the mousedownand mousemoveevents are triggered one after the other.
然后在mousedown和mousemove事件一个接一个触发时添加标志。
element.addEventListener('mousedown', () => {
element.addEventListener('mousemove', flagged);
});
Remember to remove this on a mouse up so we don't get a huge stack of events repeated on this element.
请记住在鼠标抬起时删除它，这样我们就不会在此元素上重复大量事件。
element.addEventListener('mouseup', () => {
element.removeEventListener('mousemove', flagged);
});
Finally inside the mouseupevent on our element we can use the flag logic to add and remove the click.
最后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);
});
In the above example above I am targeting the real target that is clicked, so if this were a slider I would be targeting the image and not the main gallery element. to target the main elementjust change the add/remove event listeners like this.
在上面的例子中，我的目标是被点击的真实目标，所以如果这是一个滑块，我将定位图像而不是主画廊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);
});
Conclusion
结论
By setting anonymous functions to const we don't have to bind them. Also this way they kind of have a "handle" allowing s to remove the specific function from the event instead of the entire set of functions on the event.
通过将匿名函数设置为 const，我们不必绑定它们。同样通过这种方式，他们有一个“句柄”，允许 s 从事件中删除特定函数，而不是事件上的整个函数集。
回答by Sankalp Mishra
回答by Philip
You can just check for jQuery UI's ui-draggable-draggingclass on the draggable. If it's there, don't continue the click event, else, do. jQuery UI handles the setting and removal of this class, so you don't have to. :)
您可以ui-draggable-dragging在可拖动对象上检查 jQuery UI 的类。如果它在那里，不要继续点击事件，否则，做。jQuery UI 处理此类的设置和删除，因此您不必这样做。:)
Code:
代码：
$(function(){
$('div').bind('click', function(){
if( $(this).hasClass('ui-draggable-dragging') ) { return false; }
$(this).toggleClass('orange');
});
$('div').draggable();
});
