jquery - 在 Chrome 中按键触发的 mousemove() 函数

我的 jQuery 中有一个 mousemove() 和一个 keyup() 处理程序，两者都做不同的事情。 mousemove() 处理程序负责淡入和淡出 div，而 keyup() 处理程序滚动窗口。这在 Safari、Opera 和 Firefox 中运行良好，但在 Chrome 中会发生奇怪的事情。似乎 mousemove() 函数是在 keyup() 上触发的。我玩过并检测到这只发生在光标在窗口内时，即 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 类，每个category 包含一行单元格，所有单元格全屏显示，窗口根据按键事件滚动到各自的位置。

希望这一切都是有道理的。谢谢!

最佳答案

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

请将 html 改为 document 如下:

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

关于jquery - 在 Chrome 中按键触发的 mousemove() 函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17299479/