.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

Один из способов, с помощью которого я решил эту проблему, заключается в следующем: я в основном закодировал решение «производитель / потребитель», где событие 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 миллисекунд, mousemove все равно будет срабатывать 3 раза при каждом срабатывании setInterval, поэтому он сохраняетзначительных вычислений, и 10 мс достаточно коротко для быстродействующего действия (1000 мс = 1 с, поэтому 10 мс = 100 кадров в секунду).

Answer 3

Посмотрите на mouseenter и mouseleave события, они лучше, чем mousemove и mouseenter комбинации.