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事件之間移動。