你可以检测到“拖”在jQuery？
我有一个跳跃者，当用户点击一个链接时出现。
问题是，可以点击并拖动相同的链接进行重新排列。 在这种情况下，我不需要跳动者出现。 它只需要出现，如果它实际上等待去某个地方。
我怎样才能用jQuery创build一个事件监听器，只允许一个跳动者出现，如果点击链接 ，而不是点击和拖动？
在mousedown上，开始设置状态，如果mousemove事件被触发logging它，最后在mouseup上，检查鼠标是否移动。 如果它移动，我们一直在拖。 如果我们没有移动，这是一个点击。
var isDragging = false; $("a") .mousedown(function() { isDragging = false; }) .mousemove(function() { isDragging = true; }) .mouseup(function() { var wasDragging = isDragging; isDragging = false; if (!wasDragging) { $("#throbble").toggle(); } }); 这是一个演示： http : //jsfiddle.net/W7tvD/1399/
出于某种原因，上述解决scheme不适合我。 我去了以下：
$('#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'); } })
你可以调整任何你想要的距离限制，甚至把它一直归零。
用jQuery UI就可以做到这一点！
$( "#draggable" ).draggable({ start: function() { }, drag: function() { }, stop: function() { } });
试试这个：它显示什么时候是'拖'状态。 ;） 小提琴链接
$(function() { var isDragging = false; $("#status").html("status:"); $("a") .mousedown(function() { $("#status").html("status: DRAGGED"); }) .mouseup(function() { $("#status").html("status: dropped"); }); $("ul").sortable(); });
最简单的方法是触摸开始，触摸移动和触摸结束。 这是适用于PC和触摸设备只是在jQuery文档中检查，并希望这是你最好的解决scheme。 祝你好运
jQuery插件基于西门子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!'); });
^^
$(".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"); });
此解决scheme使用“on”和“off”函数来绑定解除鼠标移动事件（绑定和取消绑定已弃用）。 您还可以检测两个mousemove事件之间鼠标x和y位置的更改。
确保将元素的可拖动属性设置为false，以便在侦听mouseup事件时不会产生副作用：
<div class="thing" draggable="false">text</div>
然后，你可以使用jQuery：
$(function() { var pressed, pressX, pressY, dragged, offset = 3; // helps detect when the user really meant to drag $(document) .on('mousedown', '.thing', function(e) { pressX = e.pageX; pressY = e.pageY; pressed = true; }) .on('mousemove', '.thing', function(e) { if (!pressed) return; dragged = Math.abs(e.pageX - pressX) > offset || Math.abs(e.pageY - pressY) > offset; }) .on('mouseup', function() { dragged && console.log('Thing dragged'); pressed = dragged = false; }); });
你需要设置一个计时器。 当定时器超时时，开始跳动并注册点击。 发生拖动时，请清除计时器，以免从未完成。
如果您使用的是jQueryUI，则有一个onDrag事件。 如果你不是，那么把你的监听器连接到mouseup（），而不是单击（）。
// 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"); });
你不需要设置variables，你可以设置它是否在数据属性中移动
$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 } });
