jquery模拟实现鼠标指针停止运动事件

实现鼠标指针停止运动事件可以通过以下步骤实现：

1. 获取鼠标位置并设置定时器

我们可以利用mousemove事件，获取鼠标位置，并将其保存在一个变量中。然后，设置一个定时器，每隔一段时间检查鼠标位置是否发生变化。

let lastMouseX, lastMouseY;

$(document).on('mousemove', function(e) {
    lastMouseX = e.pageX;
    lastMouseY = e.pageY;
});

setInterval(function() {
    // 检查鼠标位置是否发生改变
    if (lastMouseX == prevMouseX && lastMouseY == prevMouseY) {
        // 触发停止事件
        $(document).trigger('mousestop');
    }

    prevMouseX = lastMouseX;
    prevMouseY = lastMouseY;
}, 50); // 50毫秒检查一次

1. 自定义鼠标停止事件

在第一步中，我们检查了鼠标位置是否发生了改变，并通过触发自定义的“mousestop”事件来表示鼠标停止运动。我们可以在需要监听鼠标停止事件的元素上监听该事件，并执行相应的操作。

$('.myElement').on('mousestop', function() {
    // 停止后续操作
    console.log('鼠标停止运动');
});

1. 完整示例

下面是一个完整的示例，当鼠标停止运动时，页面上的文字会发生旋转。

let prevMouseX = 0, prevMouseY = 0;
let lastMouseX, lastMouseY;

$(document).on('mousemove', function(e) {
    lastMouseX = e.pageX;
    lastMouseY = e.pageY;
});

setInterval(function() {
    // 检查鼠标位置是否发生改变
    if (lastMouseX == prevMouseX && lastMouseY == prevMouseY) {
        // 触发停止事件
        $(document).trigger('mousestop');
    }

    prevMouseX = lastMouseX;
    prevMouseY = lastMouseY;
}, 50); // 50毫秒检查一次

$('.myElement').on('mousestop', function() {
    // 停止后续操作
    console.log('鼠标停止运动');

    // 进行旋转动画
    $(this).animate({
        'transform': 'rotate(360deg)'
    }, 1000);
});

另外，下面是一个使用鼠标停止事件实现搜索自动补全的示例。

let prevMouseX = 0, prevMouseY = 0;
let lastMouseX, lastMouseY;

$(document).on('mousemove', function(e) {
    lastMouseX = e.pageX;
    lastMouseY = e.pageY;
});

setInterval(function() {
    // 检查鼠标位置是否发生改变
    if (lastMouseX == prevMouseX && lastMouseY == prevMouseY) {
        // 触发停止事件
        $(document).trigger('mousestop');
    }

    prevMouseX = lastMouseX;
    prevMouseY = lastMouseY;
}, 50); // 50毫秒检查一次

$('#searchInput').on('input', function() {
    let keyword = $(this).val();

    // 发送ajax请求，获取匹配的搜索结果
    $.get('/search', { keyword }, function(results) {
        if (results.length > 0) {
            // 显示搜索结果列表
            $('#searchResultList').show().empty();
            for (let result of results) {
                // 添加搜索结果项
                $('#searchResultList').append($('<li>' + result + '</li>'));
            }
        }
    });
});

$(document).on('mousestop', function() {
    // 隐藏搜索结果列表
    $('#searchResultList').hide().empty();
});