Chrome浏览器中按键触发mousemove()函数。

Question

我有一个在jQuery中的mousemove()和keyup()处理程序，它们分别执行不同的操作。 mousemove()处理程序负责淡化div的进出，而keyup()处理程序滚动窗口。这在Safari、Opera和Firefox中都很好用，但在Chrome中会发生奇怪的事情。似乎keyup()会触发mousemove()函数。我进行了一些尝试并发现这只会在光标位于窗口内时发生，即Chrome将窗口滚动相对于光标视为mousemove()事件。有没有办法防止这种情况发生/让Chrome区分这里的操作？

以下是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();
    });

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和.cell是div类，每个类别都包含一行单元格，所有单元格都是全屏的，窗口根据键盘事件滚动到它们各自的位置。

希望这些都能让您理解。谢谢！

- principal

---

我更倾向于说 Chrome 正常运行，而 Safari、Opera 和 Firefox 的行为很奇怪。无论你如何看待这个问题，有一件事是确定的... 我不知道解决你的问题的方法。 - musefan

也许你可以在 keyup 函数内部停用 mousemouse 处理程序，并在回调函数中重新激活它，你可以将附加到 mousemouve 的函数存储在一个变量中以保存它。即使 Chrome 在 keyup 期间触发了 mousemouve，它也不会执行任何操作... - TCHdvlp

Answer 1

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

请将 HTML 更改为 document，如下所示：

Please change html to document as follows:

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

- rgrano