Как обнаружить, когда mousemove остановился

Как можно обнаружить с помощью eventListener, когда mousemove закончил?

document.AddEventListener('mousemove', startInteractionTimer, false);

function startInteractionTimer(){
  clearInterval(touchInterval);
  touchInterval = setInterval(noAction, 6000);
}

Я хочу запустить функцию startInteractionTimer сразу после завершения mousemove, и я хотел бы это поймать. В приведенном выше примере кода он запускается, если мышь перемещается.

Спасибо

Изменить: Хорошо, я ответил на свой вопрос, а script выше - ^ отлично.

Ответ 1

Вы всегда можете создать для него настраиваемое событие:

(function ($) {
    var timeout;
    $(document).on('mousemove', function (event) {
        if (timeout !== undefined) {
            window.clearTimeout(timeout);
        }
        timeout = window.setTimeout(function () {
            // trigger the new event on event.target, so that it can bubble appropriately
            $(event.target).trigger('mousemoveend');
        }, 100);
    });
}(jQuery));

Теперь вы можете просто сделать это:

$('#my-el').on('mousemoveend', function () {
    ...
});

Edit:

Кроме того, для согласованности с другими событиями jQuery:

(function ($) {
    $.fn.mousemoveend = function (cb) {
        return this.on('mousemoveend', cb);
    });
}(jQuery));

Теперь вы можете:

$('#my-el').mousemoveend(fn);

Ответ 2

Вы можете попробовать установить/очистить тайм-аут только для обнаружения конца перемещения мыши...

var x;
document.addEventListener('mousemove', function() { 
    if (x) clearTimeout(x); 
    x = setTimeout(startInteractionTimer, 200); 
}, false);

Как долго вы хотите ждать, зависит от вас. Я не знаю, как долго вы хотите сказать, "конец мусмове"

Пример: http://jsfiddle.net/jeffshaver/ZjHD6/

Ответ 3

Вот еще одно решение для пользовательских событий, но без jQuery. Он создает событие с именем mousestop, которое будет запущено на элементе, на котором указатель мыши включен. Он будет пузыриться, как и другие события мыши.

Итак, как только вы включите этот фрагмент кода, вы можете добавить прослушиватели событий к любому элементу с помощью addEventListener('mousestop', fn):

(function (mouseStopDelay) {
    var timeout;
    document.addEventListener('mousemove', function (e) {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            var event = new CustomEvent("mousestop", {
                detail: {
                    clientX: e.clientX,
                    clientY: e.clientY
                },
                bubbles: true,
                cancelable: true
            });
            e.target.dispatchEvent(event);
        }, mouseStopDelay);
    });
}(1000));

// Example use
document.getElementById('link').addEventListener('mousestop', function(e) {
    console.log('You stopped your mouse while on the link');
    console.log('Mouse coordinates are: ', e.detail.clientX, e.detail.clientY);
    // The event will bubble up to parent elements.
});

<h1>Title</h1>
<div>
    content content<br>
    <a id="link" href="#">stop your mouse over this link for 1 second</a><br>
    content content content
</div>