极客观点
项目管理
HarmonyOS
如题，最近学习鼠标滚动事件，这是在网上看到的dome，想了很久都没想到那出问题了，特来请教。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标通过滚动滚轮切换图片</title>
<style>
#picBox{
width:800px;height:600px;
margin:70px auto;
}
</style>
<script>
var nowPic=1;
function MouseWheel(e){
var pic;
e=e||window.event;
for(i=1;i<4;i++){
if(i==nowPic){
if(e.wheelDelta){//IE
pic=document.getElementById("pic"+i);
pic.style.display="block";
}
else if(e.detail){//Firefox
pic=document.getElementById("pic"+i);
pic.style.display="block";
}
}else{
pic=document.getElementById("pic"+i);
pic.style.display="none";
}
}
if(nowPic>=3){
nowPic=1;
}else{
nowPic++;
}
}
/*Firefox注册事件*/
if(document.addEventListener){
document.addEventListener("DOMMouseScroll",MouseWheel,false);
}
window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome
</script>
</head>
<body>
<h3 align="center">鼠标通过滚动滚轮切换图片</h3>
<div id="picBox">
<img src="http://picm.bbzhi.com/dongwubizhi/dongwuheji/dongwuheji_69803_m.jpg" width="800px" height="600px" id="pic1">
<span style="white-space:pre"></span>
<img src="http://pic1a.nipic.com/2008-12-22/2008122204359187_2.jpg" width="800px" height="600px" id="pic2" style="display:none;">
<span style="white-space:pre"></span>
<img src="http://imgphoto.gmw.cn/attachement/jpg/site2/20121221/002564a60ce4123e17614e.jpg" width="800px" height="600px" id="pic3" style="display:none;">
</div>
</body>
</html>
我自己把代码测了一下，通过 debug 发现，
MouseWheel函数执行了两次，然后再往下看，你的这段代码既给 window 又给 document 的 onmousewheel 对象赋值，你这样子应该是为了实现兼容性吧，但是这么做会造成
当你每次滑动滚轮的时候，window 执行一次 MouseWheel 函数，document 又执行一次（我在 chrome 下测试时这样的），所以导致你的图片会跳播。
把 document 的删掉，目前我自己测试，兼容 chrome 和 Firefox 和 IE 高版本，播放正常，但这个时候会出现一个 bug ，就是当你第一次滚动滑轮，会没有效果，原因是 你的 nowPic 的初值是 1，设置成 2 就正常了。
至于其他兼容性就不知道了。OooO