CODEWITHSUNDEEP
javascriptjqueryhtml
supersize
supersize

Reputation: 14833

How to detect when mousemove has stopped

How is it possible to detect with an eventListener when mousemove has finished?

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

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

I want to start the function startInteractionTimer immediately after the mousemove has ended and I would like to catch that. On the code example above, it is starting if the mouse is moved.

Thanks

Edit: Alright, I answered my own question and the script above --^ is just fine.

Upvotes: 26

Views: 27494

Answers (3)

trincot
trincot

Reputation: 351084

Here is another custom-event solution, but without jQuery. It creates an event called mousestop which will be triggered on the element that the mouse pointer is on. It will bubble up like other mouse events.

So once you have that piece of code included, you can add event listeners to any element with 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>

Upvotes: 12

Nathan
Nathan

Reputation: 11159

You could always make a custom event for it:

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

Now you can just do this:

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

Edit:

Also, for consistency with other jQuery events:

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

Now you can:

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

Upvotes: 18

Jeff Shaver
Jeff Shaver

Reputation: 3355

You could try setting/clearing a timeout solely to detect the end of moving the mouse...

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

How long you want to wait is up to you. I don't know how long you want to say is "the end of a mousemove"

Example: http://jsfiddle.net/jeffshaver/ZjHD6/

Upvotes: 13

Related Questions