.mousemove更有效

Question

在网页中，每当指针靠近<div>的边缘时，我想显示一些菜单。我可以使用.mousemove，检查位置和显示/隐藏菜单时，指针是在指定的距离。

正如jQuery手册所述：

请记住，每当鼠标指针移动时，就会触发mousemove事件，即使是像素。这意味着可以在很短的时间内生成数百个事件。

是否有一些简洁的方法来检测游标是否与边缘处于指定的距离，而不涉及资源消耗的.mousemove？我想到了一些不可见的<div>并在那里捕获了.mouseenter()，但是这样的div将与其他元素重叠，并会阻止其他事件从这些元素中分离出来。

Answer 1

参见下面的代码，该代码可用于计算div和鼠标指针之间的距离。

(function() {

    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);
    });

})();

单击此处获取更多信息

Answer 2

看看mouseenter和mouseleave事件，它们比mousemove和mouseenter组合要好。

Answer 3

解决这个问题的方法之一是，我基本上编写了一个生产者/消费者解决方案，其中mousemove事件是生产者，而计时器是使用者。一些未经测试的代码如下所示：

var pos = []
var old_pos = []
$(document).mousemove(function(e) {
    pos = [e.pageX, e.pageY]
    // do something else here?
});
setInterval(function(){
    // do something with the fact that mouse has moved from old_pos to pos;
    old_pos = [pos[0], pos[1]];
}, 100);

就我个人而言，我发现即使我将间隔时间设置为10毫秒，每次setInterval触发mousemove仍然会触发3次，因此它节省了大量的计算，而10 is对于快节奏的动作来说是足够短的(1000 is =1秒，所以10 is= 100帧每秒)。