2013-06-25 57 views
4

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

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

+0

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

+0

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

回答

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

请更改htmldocument如下:

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