jQuery - 不要在'mousemove'上点击'点击'

Question

我创建了一个Fiddle来演示我的情况。

我想在用户平移时不触发点击事件 - 只有当它只是一个简单的点击。我尝试过使用.off（）和.on（）的不同位置来无济于事。

在此先感谢您的帮助。

Answer 1

http://jsfiddle.net/Waxen/syTKq/3/

更新你的小提琴做你想做的。我把超时事件的重新绑定所以它不会立即触发，并调整了鼠标移动到

Answer 2

在“点击”和“平移”之间进行区分的唯一方法是鼠标花费的时间。你可以在mousedown中创建一个Date，然后在mouseup中创建一个Date，如果两个日期之间的差异大于某个阈值（我猜可能是1/10秒，但是你可以想要实验）

Answer 3

您可以使用mousemove/mousedown事件来设置可用于click事件处理程序的标志，以确定用户是在单击还是在平移。喜欢的东西：

//set a flag for the click event to check 
var isClick = false; 

//bind to `mousedown` event to set the `isClick` flag to true 
$(document).on('mousedown', function (event) { 
    isClick = true; 

//bind to `mousemove` event to set the `isClick` flag to false (since it's not a drag 
}).on('mousemove', function() { 
    isClick = false; 

//bind to `click` event, check to see if the `isClick` flag is set to true, if so then this is a click, otherwise this is a drag 
}).on('click', function() { 
    if (isClick) { 
     console.log('click'); 
    } else { 
     console.log('drag'); 
    } 
});​​ 

这里是一个演示：http://jsfiddle.net/SU7Ef/

Answer 4

在上单击事件，可以检测鼠标是否被按下向下或向上。因此，让我们分析一下：

DRAG: 
mouse down 
mosue position changes 
mouse up 

CLICK: 
mouse down 
mouse up 

你看 - 不同的是改变鼠标的位置。您可以在鼠标下方的记录点击坐标，然后在muse恢复时进行比较。如果它在某个阈值内为，则动作是点击。

Answer 5

我加了一个“平移”布尔一个解决问题的方法：

看到http://jsfiddle.net/syTKq/4/

基本上，如果用户的mousedown和鼠标移动，然后平移是真的。一旦mouseup平移是错误的。如果只是被ousedown，平移是错误的，因此放大。

Answer 6

该解决方案可以解决你的问题：

var bClicking = false, 
    moved = false;; 
var previousX, previousY; 
var $slider = $('#slider'), 
    $wrapper = $slider.find('li.wrapper'), 
    $img = $slider.find('img.foo'); 

$img.on('click', function() 
{ 
    if(!moved) 
    { 
     doZoom(); 
    } 
}); 

$wrapper.mousedown(function(e) { 
    e.preventDefault(); 

    previousX = e.clientX; 
    previousY = e.clientY; 
    bClicking = true; 
    moved = false; 
}); 

$(document).mouseup(function(e) { 
    bClicking = false; 
}); 

$wrapper.mousemove(function(e) { 
    if (bClicking) 
    { 
     moved = true; 
     var directionX = (previousX - e.clientX) > 0 ? 1 : -1; 
     var directionY = (previousY - e.clientY) > 0 ? 1 : -1; 

     $(this).scrollLeft($(this).scrollLeft() + 10 * directionX); 
     $(this).scrollTop($(this).scrollTop() + 10 * directionY); 

     previousX = e.clientX; 
     previousY = e.clientY; 
    } 
}); 

function doZoom() { 
    $img.animate({ 
     height: '+=300', 
     width: '+=300' 
    }, 500, function() { 
     //animation complete 
    }); 
}​ 

基本上，它调用doZoom()只有当鼠标未在mousedown和mouseup事件之间移动。