javascript 如何区分单击和拖放事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4283193/
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
How to differentiate between click and drag/drop event?
提问by Richard Knop
I have a problem with element which is both draggable and also has a click event.
我有一个既可拖动又具有单击事件的元素的问题。
$('.drag').mousedown(function() {
//...
});
$('.class').click(function() {
//...
)};
<div class="drag class"></div>
When I drag and drop the element, the click event gets fired, too. How to prevent that?
当我拖放元素时，click 事件也会被触发。如何防止？
采纳答案by Richard Knop
Also you could probably do something with the mousemove and mousedown events together to disable the click event:
您也可以一起使用 mousemove 和 mousedown 事件来禁用单击事件：
var dragging = 0;
$('.drag').mousedown(function() {
$(document).mousemove(function(){
dragging = 1;
});
});
$(document).mouseup(function(){
dragging = 0;
$(document).unbind('mousemove');
});
$('.class').click(function() {
if (dragging == 0){
// default behaviour goes here
}
else return false;
)};
回答by wajiw
You should be able to do that by stopping the propagation on the mousedown event.
您应该能够通过停止 mousedown 事件的传播来做到这一点。
$('.drag').mousedown(function(event){
event.stopPropagation();
});
You may have to make sure that this event is attached before the click event though.
不过，您可能必须确保在单击事件之前附加此事件。
回答by Abhishek Sachan
In my case selected answer didn't worked. So here is my solution which worked properly(may be useful for someone):
在我的情况下，选择的答案不起作用。所以这是我的解决方案，它工作正常（可能对某人有用）：
var dragging = 0;
$(document).mousedown(function() {
dragging = 0;
$(document).mousemove(function(){
dragging = 1;
});
});
$('.class').click(function(e) {
e.preventDefault();
if (dragging == 0){
alert('it was click');
}
else{
alert('it was a drag');
}
});
回答by Katerina Pavlenko
It's ok, but you should alway remember, that user can move mouse slightly during the click and don't notice that. So he'd think hi clicked and you – that he dragged
没关系，但是您应该始终记住，用户可以在单击期间稍微移动鼠标而不会注意到这一点。所以他会认为你点击了你 - 他拖着
回答by Gilad
I noticed that if the drag event is registered prior to click event then the problem described will not happen. Here is an example code:
我注意到如果拖动事件在点击事件之前注册，那么所描述的问题就不会发生。这是一个示例代码：
This code create the mentioned problem:
此代码创建了上述问题：
var that = this;
var btnId = "button_" + this.getId();
var minView = $("<div>", {"id":btnId, style:"position:absolute; top:"
+ this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"});
minView.html(this.getMinimizedTitle());
minView.click(function expendWidget(event) {
$("#" + btnId).remove();
that.element.css({"left":that.options.style.left, "right":that.options.style.right});
that.element.show();
});
minView.draggable();
minView.on("drag", this.handleDrag.bind(this));
this.element.parent().append(minView);
this code does not create the problem:
此代码不会产生问题：
var that = this;
var btnId = "button_" + this.getId();
var minView = $("<div>", {"id":btnId, style:"position:absolute; top:"
+ this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"});
minView.html(this.getMinimizedTitle());
minView.draggable();
minView.on("drag", this.handleDrag.bind(this));
minView.click(function expendWidget(event) {
$("#" + btnId).remove();
that.element.css({"left":that.options.style.left, "right":that.options.style.right});
that.element.show();
});
this.element.parent().append(minView);
