如何检测鼠标何时触发鼠标移动？ [英] How to detect if mouse is moving when mouseup is fired?

问题描述

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

I've tried to implement a page panorate by dragging. In my implementation the page moves for a while after user has released the mouse button, like dragging maps in Google Maps. Now I'd like to prevent this effect, when the mouse is no longer moving when user releases the button. The problem is, that I just can't figure out how to detect if the mouse really moves when mouseup event is fired.

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

For now I've tried to tackle this problem by calculating the dragging speed and then compare the speed to a pre-valued "sensitivity", which works most of the time, but sometimes it fails.

jsFiddle 的简化示例。当玩小提琴时，请使用FF中的中间按钮，draggabble div粘贴到左按钮。

Simplified example at jsFiddle . When playing around with the fiddle, please use middlebutton in FF, the draggabble div "sticks" to the left button.

Pseudocode：

Pseudocode:

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

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

So, is it even possible to detect if mouse is moving or not in this situation? Maybe I need a different approach for this task?

推荐答案

一个想法是在mouseUp之后保持mouseMove监听器活动0.5秒（设置一个计时器），如果鼠标移动了0.5秒（即鼠标位置与mouseUp不同），则假设有动作并为其设置动画。

One idea is keep the mouseMove listener active for .5 second after the mouseUp (set a timer), if the mouse has moved in that .5 second (i.e. mouse position is different from what it was at mouseUp) then assume there was motion and animate it.

您可能需要玩.5秒才能看到最佳效果。

You may need to play around with the .5 second to see what gives the best feel.

这篇关于如何检测鼠标何时触发鼠标移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！