javascript - 如何在触发 mouseup 时检测鼠标是否在移动？

Question

我尝试通过拖动来实现页面全景。在我的实现中，页面会在用户释放鼠标按钮后移动一段时间，就像在 Google map 中拖动 map 一样。现在我想防止这种效果，当用户释放按钮时鼠标不再移动。问题是，当 mouseup 事件被触发时，我无法弄清楚如何检测鼠标是否真的移动。

现在我尝试通过计算拖动速度来解决这个问题，然后将速度与预先设定的“灵敏度”进行比较，这在大多数情况下都有效，但有时会失败。

jsFiddle 的简化示例.玩 fiddle 时，请在 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 秒，看看什么能给人最好的感觉。