如何检测鼠标何时触发鼠标移动？

Question

我试图通过拖动实现页面panorate.在我的实现中,用户释放鼠标按钮后页面会移动一段时间,就像在Google地图中拖动地图一样.现在,当用户释放按钮时鼠标不再移动时,我想阻止此效果.问题是,我无法弄清楚如何在mouseup事件被触发时检测鼠标是否真的移动.

现在我试图通过计算拖动速度来解决这个问题,然后将速度与预先估计的"灵敏度"进行比较,这种"灵敏度"大部分时间都有效,但有时会失败.

jsFiddle的简化示例.在玩小提琴的时候,请在FF中使用中间按钮,draggabble div"粘在"左按钮上.

伪代码:

AniMove = function (doc, element, sensitivity, panspeed, duration) {
    var mouseDown = function (e) {
            sTime = new Date();
            originalX = mouseX = e.clientX;
            originalY = mouseY = e.clientY;
            /* addEventListeners mousemove & mouseup for document */
            return;
        },
        mouseMove = function (e) {
            /* Setting new position for #square + new mouseX & Y */
            return;
        },
        mouseUp = function () {
            var dc = 1;
                /* removeEventListeners mousemove & mouseup */
                eTime = new Date();
                vX = Math.round((50 * panspeed) * (originalX - mouseX) / (eTime - sTime));
                vY = Math.round((50 * panspeed) * (originalY - mouseY) / (eTime - sTime));

            // Check whether mouse is moving or not,
            // now checking the speed against sensitivity, which is not reliable

                if (Math.abs(vX) < sensitivity){vX = 0;}
                if (Math.abs(vY) < sensitivity){vY = 0;}

                for (n = 0; n < dur; n++, dc += 0.001) {
                    vX = Math.round(vX  * dec / dc);
                    vY = Math.round(vY * dec / dc);
                    delay[n] = setTimeout(endDrag(n, vX, vY), n * 50);
                }
                return;
            },
            endDrag = function (n, vX, vY) {
                /* Setting new position for #square */
                return;
            },
            dec = 1 - 120 / duration;
    panspeed *= -0.01;
    duration /= 50;
    element.addEventListener('mousedown', mouseDown, false);    
}
drag = new AniMove(document, document.getElementById('square'), 20, 100, 500);  

那么,在这种情况下,甚至可以检测鼠标是否在移动？也许我需要一种不同的方法来完成这项任务？

Answer 1

一种想法是在 mouseUp 后保持 mouseMove 侦听器处于活动状态 0.5 秒（设置计时器），如果鼠标在那 0.5 秒内移动（即鼠标位置与 mouseUp 时的位置不同），则假设存在运动，并且将其动画化。

您可能需要尝试一下 0.5 秒，看看什么能带来最佳感觉。