jQuery - don't fire 'click' on 'mousemove

jQuery - don't fire 'click' on 'mousemove'

本文关键字：on mousemove click fire jQuery don      更新时间：2023-09-26

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

我不想在用户平移时触发点击事件——只有当它只是一个简单的点击时。我尝试过.of（）和.on（）的不同位置，但都没有成功。

提前感谢您的帮助。

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

更新你的小提琴，做你想做的事。我将事件的重新绑定置于超时状态，这样它就不会立即触发，并将鼠标移动调整为

在点击事件中，您可以检测鼠标是按向下还是按向上。让我们分析一下：

DRAG:
mouse down
mosue position changes
mouse up
CLICK:
mouse down
mouse up

您可以看到-差异是更改了鼠标位置。您可以用鼠标记录点击坐标，然后在muse返回时进行比较。如果在某些trehold内，则操作是单击

区分"点击"answers"平移"的唯一方法是鼠标按住的时间。您可以在mousedown中创建一个Date，然后在mouseup中创建另一个Date。只有当两个日期之间的差异大于某个阈值（我猜是1/10秒，但您可能想进行实验）时，才触发单击（缩放）事件。

我添加了一个"平移"bool来解决您的问题：

参见http://jsfiddle.net/syTKq/4/

基本上，如果用户有mousedown和mousemove，那么平移是真的。一旦鼠标向上平移为false。如果只是鼠标向下移动，则平移为false，因此缩放。

此解决方案解决了您的问题：

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
    });
}​

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

您可以使用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/

相关文章：