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

希望这一切都有意义。谢谢！

Answer 1

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

请按以下方式将html更改为document：

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

在Chrome中的keypress上触发了mousemove（）函数

1 个答案: