4

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

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

4

1 回答 1

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

请改为html如下document：

$( document ).mousemove(function(e) {
于 2013-06-30T06:54:14.057 回答