如何确定鼠标光标的起点和终点？答案

【问题标题】：How can I determine start and stop points for mouse cursor?如何确定鼠标光标的起点和终点？
【发布时间】：2011-11-08 01:38:15
【问题描述】：

假设用户开始移动鼠标并停在浏览器的某个位置。如何使用 Javascript/Jquery 确定起点和终点？

起点很简单，我可以通过 mousemove 事件获得，但是终点呢？

我不能使用 mouseenter 或 mouseleave 事件，因为我的游乐场是窗口或文档本身。

谢谢。

【问题讨论】：

你应该在mousemove上设置一个定时器，如果鼠标在500ms内没有移动，你就知道那是结束位置。

标签： javascript javascript-events mouseevent jquery

【解决方案1】：

使用 setTimeout 和 clearTimeout 的组合。如果用户在 x 秒内没有移动，则表示他停止了。

这里我给你写了一个例子：

<script type="text/javascript">
    var lastMove = 0;
    var lastTimeout = 0;
    jQuery(document).ready(function () {
        $(document).mousemove(function (e) {
            $('#status').html(e.pageX + ', ' + e.pageY);
            var currentMove = (new Date()).getTime();
            if (lastTimeout != 0) {
                clearTimeout(lastTimeout);
            }
            if (currentMove - lastMove > 1500)
            { alert('started'); }
            lastMove = currentMove;
            lastTimeout = setTimeout(function () {
                var currentMove = (new Date()).getTime();
                if (currentMove - lastMove > 1500)
                { alert('stopped'); }
            }, 1510);
        });
    })
</script>
<h2 id="status">
0, 0
</h2>

【讨论】：

【解决方案2】：

开始位置是第一次触发 mousemove 事件的位置。它会一直开火，直到鼠标停止移动。因此，如果您在 mousemove 事件函数中添加一个计时器 (setTimeout/clearTimeout)，您可以说鼠标在经过一定时间后停止移动，而没有调用 mousemove 函数。

【讨论】：