jQuery Mousemove：更改 5px 时触发

Posted 2023-05-08

【中文标题】jQuery Mousemove：更改 5px 时触发

【英文标题】：jQuery Mousemove: trigger on change of 5px

【发布时间】：2012-09-29 06:48:28

【问题描述】：

出于多种技术原因，我在 jQuery 上实现了我自己的“可拖动”功能，而不是使用 jQuery UI，并且我正在使用 mousedown 和 mousemove 事件来监听试图拖动元素的用户。

到目前为止效果很好，我只想每移动 5 像素触发一次 mousemove 事件，而不是逐个像素。我试过编写一个简单的代码：

$('#element').bind('mousemove', function(e) 
    if(e.pageX % 5 == 0) 
        // Do something
    
);

但是，每 5 个像素的移动并不稳定，有时如果您将鼠标移动得太快，它会跳过几个步骤。我认为这是因为当鼠标移动得非常快时，jQuery 不会触发每个像素的事件。

你们知道如何每 5 个像素触发一次事件吗？

非常感谢，

安东尼奥

【参考方案1】：

您的代码没有考虑拖动开始的位置。 e.pageX 只会给你页面坐标，而不是差异。您需要检查移动距离的变化。

This post 非常相关。

这是基本代码：

$(document).mousemove(function(event) 
    var startingTop = 10,
        startingLeft = 22,
        math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) + 
                                    Math.pow(startingLeft - event.clientX, 2))) + 'px';
    $('span').text('From your starting point(22x10) you moved:   ' + math);
);

编辑：现在我想我明白 OP 在说什么了。我用上面的代码想出了this fiddle。它跟踪您当前相对于屏幕左上角的位置，并检查您的差异是否大于 5 个像素。

新脚本：

var oldMath = 0;
$(document).mousemove(function(event) 
    var startingTop = 10,
        startingLeft = 22,
        math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) +Math.pow(startingLeft - event.clientX, 2))) + 'px';
    $('#currentPos').text('you are at :' + math);

    if(Math.abs(parseInt(math) - oldMath) > 5)
        //you have moved 5 pixles, put your stuff in here
        $('#logPos').append('5');


        //keep track of your position to compare against next time
        oldMath = parseInt(math);
    
);​

【讨论】：

感谢您的回答，davehale23，但它没有回答我的问题。我提供的代码是一个基本的 sn-p 来描述我的问题，即如何每 X 个像素触发 mousemove。

哦，我知道了。我添加了一个编辑，这更像你在说什么吗？