当用户点击链接时，我会出现一个悸动。
问题是可以点击并拖动相同的链接进行重新排列。在这种情况下，我不需要出现悸动。它只需要出现，如果它实际上等待去某个地方。
我怎样才能使用jQuery创建一个事件监听器，只有允许在点击链接时出现一个throbber，而不是点击并拖动？
答案 0 :(得分：213)
在mousedown上，开始设置状态，如果mousemove事件被触发记录它，最后在mouseup上，检查鼠标是否移动。如果它移动了，我们一直拖着。如果我们没有动，那就是点击。
var isDragging = false;
$("a")
.mousedown(function() {
isDragging = false;
})
.mousemove(function() {
isDragging = true;
})
.mouseup(function() {
var wasDragging = isDragging;
isDragging = false;
if (!wasDragging) {
$("#throbble").toggle();
}
});
答案 1 :(得分：27)
出于某种原因，上述解决方案对我不起作用。我选择了以下内容：
$('#container').on('mousedown', function(e) {
$(this).data('p0', { x: e.pageX, y: e.pageY });
}).on('mouseup', function(e) {
var p0 = $(this).data('p0'),
p1 = { x: e.pageX, y: e.pageY },
d = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));
if (d < 4) {
alert('clicked');
}
})
您可以根据需要调整距离限制，甚至可以将其一直调到零。
答案 2 :(得分：15)
使用jQuery UI就可以了！
$( "#draggable" ).draggable({
start: function() {
},
drag: function() {
},
stop: function() {
}
});
答案 3 :(得分：4)
$(".draggable")
.mousedown(function(e){
$(this).on("mousemove",function(e){
var p1 = { x: e.pageX, y: e.pageY };
var p0 = $(this).data("p0") || p1;
console.log("dragging from x:" + p0.x + " y:" + p0.y + "to x:" + p1.x + " y:" + p1.y);
$(this).data("p0", p1);
});
})
.mouseup(function(){
$(this).off("mousemove");
});
此解决方案使用＆＃34; on＆＃34;和＆＃34;关＆＃34;用于绑定取消绑定mousemove事件的函数（不建议使用bind和unbind）。您还可以检测两个mousemove事件之间鼠标x和y位置的变化。
答案 4 :(得分：3)
试试这个：它显示何时处于“拖动”状态。 ;） fiddle link
$(function() {
var isDragging = false;
$("#status").html("status:");
$("a")
.mousedown(function() {
$("#status").html("status: DRAGGED");
})
.mouseup(function() {
$("#status").html("status: dropped");
});
$("ul").sortable();
});
答案 5 :(得分：1)
这种最简单的方法是触摸开始，触摸移动和触摸结束。这对于PC和触摸设备都有用，只需在jquery文档中查看它，并希望这是最适合您的解决方案。祝你好运
答案 6 :(得分：1)
jQuery插件基于Simen Echholt的回答。我称之为单击。
/**
* jQuery plugin: Configure mouse click that is triggered only when no mouse move was detected in the action.
*
* @param callback
*/
jQuery.fn.singleclick = function(callback) {
return $(this).each(function() {
var singleClickIsDragging = false;
var element = $(this);
// Configure mouse down listener.
element.mousedown(function() {
$(window).mousemove(function() {
singleClickIsDragging = true;
$(window).unbind('mousemove');
});
});
// Configure mouse up listener.
element.mouseup(function(event) {
var wasDragging = singleClickIsDragging;
singleClickIsDragging = false;
$(window).unbind('mousemove');
if(wasDragging) {
return;
}
// Since no mouse move was detected then call callback function.
callback.call(element, event);
});
});
};
使用中：
element.singleclick(function(event) {
alert('Single/simple click!');
});
^^
答案 7 :(得分：1)
确保将元素的可拖动属性设置为 false ，以便在收听mouseup事件时不会产生副作用：
function A() {}
A.prototype.f = function() {}
然后，您可以使用jQuery：
<div class="thing" draggable="false">text</div>
答案 8 :(得分：1)
我从接受的答案扩展为仅在点击被按住并拖动时运行。
当我不按住鼠标时，函数正在运行。如果您还需要此功能，请参见以下更新的代码：
var isDragging = false;
var mouseDown = false;
$('.test_area')
.mousedown(function() {
isDragging = false;
mouseDown = true;
})
.mousemove(function(e) {
isDragging = true;
if (isDragging === true && mouseDown === true) {
my_special_function(e);
}
})
.mouseup(function(e) {
var wasDragging = isDragging;
isDragging = false;
mouseDown = false;
if ( ! wasDragging ) {
my_special_function(e);
}
}
);
答案 9 :(得分：0)
您需要设置计时器。当计时器超时时，启动throbber并注册点击。发生拖动时，清除计时器，使其永远不会完成。
答案 10 :(得分：0)
如果您使用的是jQueryUI，则会有一个onDrag事件。如果不是，请将您的监听器连接到mouseup（），而不是单击（）。
答案 11 :(得分：0)
// here is how you can detect dragging in all four directions
var isDragging = false;
$("some DOM element").mousedown(function(e) {
var previous_x_position = e.pageX;
var previous_y_position = e.pageY;
$(window).mousemove(function(event) {
isDragging = true;
var x_position = event.pageX;
var y_position = event.pageY;
if (previous_x_position < x_position) {
alert('moving right');
} else {
alert('moving left');
}
if (previous_y_position < y_position) {
alert('moving down');
} else {
alert('moving up');
}
$(window).unbind("mousemove");
});
}).mouseup(function() {
var wasDragging = isDragging;
isDragging = false;
$(window).unbind("mousemove");
});
答案 12 :(得分：0)
您不必设置变量，您可以设置它是否在数据属性中移动
$youtubeSlider.find('a')
.on('mousedown', function (e) {
$(this).data('moving', false);
})
.on('mousemove', function (e) {
$(this).data('moving', true);
})
.on('mouseup', function (e) {
if (!$(this).data('moving')) {
// Open link
}
});
答案 13 :(得分：0)
我需要一个始终跟踪鼠标位置并检测向左，向右，向上，向下拖动的功能。它也不会触发点击，但至少需要移动15像素
/**
* Check for drag when moved minimum 15px
* Same time keep track of mouse position while dragging
*/
// Variables to be accessed outside in other functions
var dragMouseX;
var dragMouseY;
var myDragging = false; // true or false
var dragDirectionX = false; // left or right
var dragDirectionY = false; // top or bottom
$(document).on("mousedown", function(e) {
// Reset some variables on mousedown
var lastDirectionCheck = e.timeStamp;
var dragStartX = e.pageX;
var dragStartY = e.pageY;
dragMouseX = e.pageX;
dragMouseY = e.pageY;
myDragging = false;
dragDirectionX = false;
dragDirectionY = false;
// On the move
$(document).on("mousemove", function(e) {
dragMouseX = e.pageX;
dragMouseY = e.pageY;
// Recalculate drag direction every 200ms in case user changes his mind
if (e.timeStamp > (lastDirectionCheck + 200)) {
dragStartX = dragMouseX;
dragStartY = dragMouseY;
lastDirectionCheck = e.timeStamp;
}
// Check for drag when moved minimum 15px in any direction
if (!myDragging && Math.abs(dragStartX - dragMouseX) > 15 || Math.abs(dragStartY - dragMouseY) > 15) {
myDragging = true;
}
if (myDragging) {
// Check drag direction X
if (dragStartX > dragMouseX) dragDirectionX = 'left';
if (dragStartX < dragMouseX) dragDirectionX = 'right';
// Check drag direction Y
if (dragStartY > dragMouseY) dragDirectionY = 'top';
if (dragStartY < dragMouseY) dragDirectionY = 'bottom';
// console.log(dragDirectionX + ' ' + dragDirectionY);
}
});
});
// Reset some variables again on mouseup
$(document).on("mouseup", function() {
$(document).off("mousemove");
myDragging = false;
dragDirectionX = false;
dragDirectionY = false;
});