关于鼠标滚轮事件

最近用到了鼠标滚轮事件,研究了一下,记下来。请使用 Chrom 浏览器查看!
首先写一个 div

#box{width:200px;height:200px;background:red;}
<div id="box"></div>

接下来就是 js 了

			window.onload = function(){
				var box = document.getElementById("box");
				box.onmousewheel = function(){
					console.log("滚轮事件")
				}
			}

现在打开 Chrom 控制台,鼠标放到这个 div 上面滚动你鼠标上的齿轮,有木有发现它已经输出滚轮事件了呢,是不是感觉好简单,不过,事情还没有完,你用火狐浏览器(FireFox)试试,发现他是不是不搭理你。那么我们就来解决这个问题,原来“onmousewheel”这个事件是不支持火狐浏览器的。火狐的滚轮事件是不支持on 事件名这样子的,火狐需要用事件的另一种方式:监听的方式,就是addEventListener这个啦。来试试:

				box.addEventListener("DOMMouseScroll",function(){
					console.log("火狐滚轮事件")
				},false);

现在火狐下面也可以输出火狐滚轮事件了。
接下来呢,我要做一个判断用户操作鼠标向上滚动,和向下滚动。
这就需要事件对象event了,我就不详细说了,大家不懂的谷歌。event 下面有一个wheelDelta属性可以获取鼠标滚轮滚动的值,不过,还是有兼容性问题,火狐下面呢是detail这么一个属性,这个属性是有值得,火狐往下滚动是 3,往上是-3,IE 和 Chrom 往上是 120,往下是-120,太坑爹了有木有,是于是乎代码就是这样子的:

				box.onmousewheel = function(ev){
					console.log("滚轮事件")
					var ev = ev || event;
					//定义一个 wheel 表示滚动方向,向下是 false,向上是 true
					var wheel = false;
					wheel = ev.wheelDelta > 0 ? true :false;
					console.log(wheel);
				}
				box.addEventListener("DOMMouseScroll",function(ev){
					console.log("火狐滚轮事件")
					var ev = ev || event;
					//定义一个 wheel 表示滚动方向,向下是 false,向上是 true
					var wheel = false;
					//注意,火狐往上滚动式一个负数,所以是小于 0,别搞混了
					wheel = ev.detail < 0 ? true :false; 
					console.log(wheel);
				},false);

测试浏览器正常,包括 IE6+,向上 true,乡下 false。
是不是完了呢,不是得,如果你将body的高度设置的高一点,比如6666px。你再试试往下滚动,页面跑了。
这时候是因为浏览器的默认事件,我们要阻止它,浏览器默认事件是和事件的绑定方式有关的,正常呢,在函数最后写一个 return false;就可以了,但是火狐是通过监听的方式绑定的,就需要用ev.preventDefault()了。代码又变了:

				box.onmousewheel = function(ev){
					console.log("滚轮事件")
					var ev = ev || event;
					//定义一个 wheel 表示滚动方向,向下是 false,向上是 true
					var wheel = false;
					wheel = ev.wheelDelta > 0 ? true :false;
					console.log(wheel);
					//通过 on 绑定的就直接 retuen false;好了
					return false;
				}
				box.addEventListener("DOMMouseScroll",function(ev){
					console.log("火狐滚轮事件")
					var ev = ev || event;
					//定义一个 wheel 表示滚动方向,向下是 false,向上是 true
					var wheel = false;
					//注意,火狐往上滚动式一个负数,所以是小于 0,别搞混了
					wheel = ev.detail < 0 ? true :false; 
					console.log(wheel);
					//监听绑定事件的方式要通过 ev.preventDefault()来阻止默认事件
					ev.preventDefault();
				},false);

现在,解决了一些问题,我们来看看效果,嗯,可以正确判断滚动方向,也处理了一些问题,那么还是那句话,这就好了吗,这门从头到尾看看代码,是不是觉得有写地方重复了,我们把它公用的封装成一个函数。再把一些兼容性问题处理一下,所以,我们的代码还要改改。
我们的最终代码为:

			window.onload = function(){
				var box = document.getElementById("box");
				function wheels(ev){
					var ev = ev || event;
					//定义一个 wheel 表示滚动方向,向下是 false,向上是 true
					var wheel = false;
					if(ev.wheelDelta){
						wheel = ev.wheelDelta > 0 ? true :false;
					}else{
						//注意,火狐往上滚动式一个负数,所以是小于 0,别搞混了
						wheel = ev.detail < 0 ? true :false; 
					}
					console.log(wheel);
					//通过 on 绑定的就直接 retuen false;好了
					return false;
					//监听绑定事件的方式要通过 ev.preventDefault()来阻止默认事件
					ev.preventDefault();
				}
				//Chrom 和 IE 等浏览器绑定滚轮事件
				box.onmousewheel = wheels;
				//火狐绑定滚轮事件
				if(box.addEventListener){
					box.addEventListener("DOMMouseScroll",wheels,false);
				}
			}

好了,大家多多交流,如果有更好的建议或者想法可以评论留言指出来,或者在页脚点击联系我。 Demo 页面:鼠标滚轮事件 DEMO


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明关于鼠标滚轮事件
喜欢 (12)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址