在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和。細胞是DIV類，每個類別持有單元的行，所有單元都是全屏，並且窗口根據關鍵事件滾動到各自的位置。

希望這一切都有道理。謝謝！

Answer 1

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

請更改html到document如下：

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