这篇文章主要介绍了javascript监听鼠标滚轮事件浅析,使用具体例子说明,同时考虑了不同的浏览器,需要的朋友可以参考下

我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加操作,或者滚轮控制某个按钮的左右,上下。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。

不同浏览器不同的事件

首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件。
另外在操作的过程中需要添加事件监听,代码如下:兼容firefox采用addEventListener监听

/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

js返回数值判断滚轮上下

判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
具体的代码如下所示:


<label for="wheelDelta">值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
var scrollFunc=function(e){
  e=e || window.event;
  var t1=document.getElementById("wheelDelta");
  var t2=document.getElementById("detail");
  if(e.wheelDelta){//IE/Opera/Chrome
  t1.value=e.wheelDelta;
  }else if(e.detail){//Firefox
  t2.value=e.detail;
  }
}
/*注册事件*/
if(document.addEventListener){
  document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>


通过运行上述代码我们可以看到:


在非firefox浏览器中,滚轮向上返回的数值是120,向下返回-120
而在firefox浏览器中,滚轮向上返回的数值是-3,向下返回3
代码部分如下,e.wheelDelta是判断是否为非firefox浏览器,e.detail为firefox浏览器
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}

最新资讯
特斯拉“单挑”电池巨头:强势买方的超级野心

特斯拉“单挑”电池巨

上海工厂投产后,特斯拉的动力电池供应链终于开始真正地
疫情“压裂”蛋壳  高速扩张带来的隐与忧

疫情“压裂”蛋壳 高

连日来,长租公寓蛋壳、自如在多个城市遭房东、租客双重
采用无钴电池即磷酸铁锂电池?特斯拉说不一定

采用无钴电池即磷酸铁

2月21日,特斯拉表示:”请留意四月特斯拉的电池发布会,无
MWC大会被取消 主办方GSMA称不向参展商退费

MWC大会被取消 主办方

据国外媒体报道,2020年“世界移动通信大会”(MWC)主办方
外卖骑手“留守”武汉:愿为这座城做亏本买卖

外卖骑手“留守”武汉

“自己也挺害怕,但毕竟选择了这份工作”……武汉封城至
中国电信:将为全国中小企业免费提供3个月云服务

中国电信:将为全国中小

中国电信今日宣布,2月19日起在全国范围内开展“暖春行
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大