在Chrome中按键触发mousemove（）函数

我在我的jQuery中有一个mousemove（）和一个keyup（）处理函数，两者都做不同的事情。 mousemove（）处理程序负责淡入和淡出div，而keyup（）处理程序则滚动窗口。这在Safari，Opera和Firefox中运行良好，但奇怪的事情发生在Chrome中。看起来在keyup（）上触发了mousemove（）函数。我玩过并检测到这只发生在光标在窗口内时，即Chrome将窗口相对于光标的滚动解释为mousemove（）事件。有什么办法可以阻止这种情况/使Chrome在这里有所区别吗？在Chrome中按键触发mousemove（）函数

仅供参考，这里是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类，每个类别持有单元的行，所有单元都是全屏，并且窗口根据关键事件滚动到各自的位置。

希望这一切都有道理。谢谢！

来源

2013-06-25 principal

我会更倾向于说这是正常的Chrome，这是Safari浏览器，Opera和Firefox正在出现异常行为。不管你用哪种方式查看它，有一点是肯定的......我不知道解决问题的方法 – musefan

也许你可以在你处于keyup函数内部并且在回调函数中重新激活它的时候去掉mousemouse处理函数，可以将附加到mousemouve的函数存储在'var'中来保存它。即使Chrome在关键期间触发鼠标移动，它也不会执行任何操作。 – TCHdvlp

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

请更改html到document如下：

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

来源

2013-06-30 06:54:14 rgrano

在Chrome中按键触发mousemove（）函数

回答

相关问题