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@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类,每个类别持有单元的行,所有单元都是全屏,并且窗口根据关键事件滚动到各自的位置。
希望这一切都有道理。谢谢!
我会更倾向于说这是正常的Chrome,这是Safari浏览器,Opera和Firefox正在出现异常行为。不管你用哪种方式查看它,有一点是肯定的......我不知道解决问题的方法 – musefan
也许你可以在你处于keyup函数内部并且在回调函数中重新激活它的时候去掉mousemouse处理函数,可以将附加到mousemouve的函数存储在'var'中来保存它。即使Chrome在关键期间触发鼠标移动,它也不会执行任何操作。 – TCHdvlp