Page 1 of 4 123 ... LastLast
Results 1 to 10 of 34

Thread: Checking if mouse is moving or not

  1. #1
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Checking if mouse is moving or not

    Hello everyone,

    Does anyone know of a technique which allows you to check if the mouse is moving or not? What I basically need to do is to check if the mouse is moving or not and send an ajax request back to the server or execute a function(as soon as the mouse is not moving). I'd like to do this because sending ajax requests onmousemove would be extremely overloading.

    Any help would be greatly appreciated.

    Thanking you for your time and patience.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    document.onmousemove = (function() {
      var onmousestop = function() {
        /* do stuff */
      }, thread;
    
      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 500);
      };
    })();
    It'll execute the supplied code if the mouse is still for half a second.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot Twey!! It works.

  4. #4
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry to bring up an old post but can you tell me how can I capture events? I tried:

    Code:
    document.onmousemove = (function(e) {
      var onmousestop = function() {
        /* do stuff */
      }, thread;
    
    console.log(e.clientX)
    
      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 500);
      };
    })();
    But it says that e has no properties. Any clue? Thanks again.

  5. #5
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by shachi View Post
    Sorry to bring up an old post but can you tell me how can I capture events? I tried:

    Code:
    document.onmousemove = (function(e) {
      var onmousestop = function() {
        /* do stuff */
      }, thread;
    
    console.log(e.clientX)
    
      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 500);
      };
    })();
    But it says that e has no properties.
    Quite. You need to look more carefully at the code Twey posted: there are three functions involved.

    The outer function is not assigned to the onmousemove property. If you look at the end, you should see that this function is actually called immediately. It is the function expression following the return statement that is used; the return value of the outer function is assigned as a listener.

    Code:
    var global = this;
    document.onmousemove = function () {
        var task;
        return function (event) {
            if (task) clearTimeout(task);
            if ((event = event || global.event)) {
                console.log(event.clientX);
                task = setTimeout(mousestop, 500);
            }
        };
    
        function mousestop() {
            /* Do stuff when the mouse stops moving. This function will be called as soon as the mouse
             * stops moving within the viewport for 500ms or more. Note that movement outside the
             * viewport (in other applications, across the desktop, or amongst the browser chrome) will
             * not be considered; it cannot be tracked.
             */
        }
    }();
    Hope that helps
    Last edited by mwinter; 07-11-2007 at 12:31 AM. Reason: Code improvement
    Mike

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That bit of code is so complex with anonymous functions nested within an anonymous function. It may not be able to be done at (the event may not be able to penetrate to) the level where you have:

    Code:
    console.log(e.clientX)
    You could perhaps use the addEventListener and attachEvent methods to do the logging as a separate function. In any case, it isn't clear what event you want to capture and you would need an alternate route to capture it in IE, which doesn't do the 'e' thing. It looks like, the way you have it nested there, you want to capture the mouse moving position, not the mouse stopped position, but logically I would suspect it is the other way around.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This seems to work out:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    
    function logx(v){
    document.getElementById('lx').value=v;
    }
    
    function mymove(e){
    clearTimeout(mymove.thread);
    var e=e? e : window.event, x=e.clientX,
    mymousestop=function(){
    logx(x);
    };
    mymove.thread=setTimeout(mymousestop, 500);
    }
    
    if ( typeof window.addEventListener != "undefined" )
        document.addEventListener( "mousemove", mymove, false );
    else if ( typeof window.attachEvent != "undefined" )
        document.attachEvent( "onmousemove", mymove );
    
    </script>
    </head>
    <body>
    <input type="text" id="lx">
    </body>
    </html>
    Last edited by jscheuer1; 07-09-2007 at 07:19 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Even adding the event in the 'normal way' works:

    Code:
    function mymove(e){
    clearTimeout(mymove.thread);
    var e=e? e : window.event, x=e.clientX,
    mymousestop=function(){
    logx(x);
    };
    mymove.thread=setTimeout(mymousestop, 500);
    }
    
    document.onmousemove=mymove;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Or simply:
    Code:
    document.onmousemove = (function() {
      var onmousestop = function() {
        /* do stuff */
      }, thread;
    
      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 500);
        console.log((arguments[0] || event).clientX);
      };
    })();
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Twey, your version is logging the moving mouse position, not the position when and only when it stops, as mine does. However, I'm still not sure which shachi is after.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •