mousemove() function triggered on keypress in Chrome

Question

I have a mousemove() and a keyup() handler in my jQuery, both doing different things. The mousemove() handler takes care of fading divs in and out, while the keyup() handler scrolls the window. This works fine in Safari, Opera and Firefox, but strange things happen in Chrome. It seems like the mousemove() function is triggered on keyup(). I've played around and detected that this only happens when the cursor is inside the window, i.e. Chrome interprets the scrolling of the window relative to the cursor as a mousemove() event. Is there any way to prevent this / make Chrome differentiate here?

For reference, here is the relevant part of the jQuery:

    // Where we are now
    var xpos = 0;
    var ypos = 0;

    // Actually get there
    var target = $( '.category' ).eq(ypos).find( '.cell' ).eq(xpos);
    $.scrollTo(target, 0);

    // Fade the navigation in and out
    var indur, outdur, outdelay;
    indur = 500;
    outdur = 500;
    outdelay = 1500;
    var fadeout;
    $( 'html' ).mousemove(function(e) {
        console.log("Mouse moved");
        if (fadeout) { 
            clearTimeout(fadeout);
            fadeout = 0;
        }

        // The text-based navigation 
        $( '.tnav' ).fadeIn(indur);

        // The four arrows
        if(xpos > 0) $( '.navleft' ).fadeIn(indur);
        if(xpos < lengths[ypos]-1) $( '.navright' ).fadeIn(indur);
        if(ypos > 0) $( '.navup' ).fadeIn(indur);
        if(ypos < lengths.length-1) $( '.navdown' ).fadeIn(indur);

        fadeout = setTimeout(function() {
            $( '.tnav, .navleft, .navright, .navup, .navdown' ).fadeOut(outdur);
        }, outdelay);
        e.preventDefault();
    }); // end of fading block

    // The fading function
    var fadeStep = function(trgt, spd, dir) {
        if(trgt.length) {
            switch(dir) {
                case "right":
                    xpos++;
                    break;
                case "left":
                    xpos--;
                    break;
                case "up":
                    ypos--;
                    break;
                case "down":
                    ypos++;
                    break;
                default:
                    return;
            }
            $.scrollTo(trgt, spd, { onAfter: function() {
                // Make sure the right arrows are faded out immediately
                if(xpos == 0) {
                    $( '.navleft' ).fadeOut(outdur);
                }
                if(xpos >= lengths[ypos]-1) {
                    $( '.navright' ).fadeOut(outdur);
                }
                if(ypos == 0) {
                    $( '.navup' ).fadeOut(outdur);
                }
                if(ypos >= lengths.length-1) { 
                    $( '.navdown' ).fadeOut(outdur);
                }
            } });
        } // end if block
    };

    // The scrolling - using arrow keys
    var speed = 300;
    $( document ).keyup(function(e) {
        switch(e.which) {
            case 39:
            if(xpos < lengths[ypos]) {
                target = $( '.category' ).eq(ypos).find( '.cell' ).eq(xpos+1);

                fadeStep(target, speed, 'right');
            }
            break;
            case 37: 
            if(xpos > 0) {
                target = $( '.category' ).eq(ypos).find( '.cell' ).eq(xpos-1);

                fadeStep(target, speed, 'left');
            }
            break;
            case 38:
            if(ypos > 0) {
                target = $( '.category' ).eq(ypos-1).find( '.cell' ).eq(xpos);

                fadeStep(target, speed, 'up');
            }
            break;
            case 40:
            if(ypos < lengths.length) {
                target = $( '.category' ).eq(ypos+1).find( '.cell' ).eq(xpos);

                fadeStep(target, speed, 'down');
            }
            break;
            default:
            return;
        }
        e.preventDefault();
    });

The HTML:

<div class="nav">
    <div class="tnav">
        <h1>My awesome site</h1>
        <h2>email&#64;whatever.com</h2>
        <ul class="menu">
            <li><a href="" class="catb">Row 1</a></li>
            <li><a href="" class="catb">Row 2</a></li>
            <li><a href="" class="catb">Row 3</a></li>
            <li><a href="" class="catb">Row 4</a></li>
            <li><a href="" class="catb">Row 5</a></li>
        </ul>
    </div><!-- end of .tnav -->
    <div class="navup">
    </div>
    <div class="navleft">
    </div>
    <div class="navright">
    </div>
    <div class="navdown">
    </div>
</div><!-- end of .nav -->  

.category and .cell are div classes, each category holds a row of cells, all cells are fullscreen, and the window scrolls to their respective positions based on key events.

Hope all this makes sense. Thanks!

Answer 1

$( 'html' ).mousemove(function(e) {

Please change html to document as follows:

$( document ).mousemove(function(e) {