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不同）然后假设是动作和动画。

你可能需要玩.5秒才能看到最佳的感觉。

Answer 2

您希望视图继续移动并逐渐停止，对吧？

您需要做的就是在MouseUp事件之前记录它的移动速度，然后以半秒左右的速度递减速度。如果按钮未关闭，鼠标是否继续移动应该无关紧要。

一旦你“放开球”，它滚动的速度与你下一手的动作无关。

因此，您需要在按钮关闭时跟踪鼠标速度，然后在按钮启动时“淡出”。

在你的情况下，如果按钮被释放时鼠标没有移动，那么类比就是用户已经“抓住了球”。所以它应该立即停止。

所以你不需要做任何特别的事来处理这种情况。如果用户在按下按钮的情况下停止鼠标，则停止平移。

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

2 个答案: