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

})();

click here了解更多信息

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次，因此节省了大量计算，10ms是快节奏动作的缩写（1000ms） = 1秒，所以10ms =每秒100帧。）

.mousemove更有效

3 个答案: