首页 / JAVASCRIPT / js中鼠标滚轮事件详解(firefox多浏览器)

js中鼠标滚轮事件详解(firefox多浏览器)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js中鼠标滚轮事件详解(firefox多浏览器)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2729字，纯文字阅读大概需要4分钟。

内容图文

附加事件

其中经我测试，IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件。
代码如下:

/*IE注册事件*/ 
if(document.attachEvent){ 
document.attachEvent('onmousewheel',scrollFunc); 
} 
 
Firefox使用addEventListener添加滚轮事件 
 代码如下:

/*Firefox注册事件*/ 
if(document.addEventListener){ 
document.addEventListener('DOMMouseScroll',scrollFunc,false); 
} 
 
Safari与Chrome属于同一类型，可使用HTML DOM方式添加事件 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 
其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式 
 代码如下:

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

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

<p><label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p> 
<p><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" /></p> 
<script type="text/javascript"> 
var oTxt=document.getElementById("txt"); 
/*********************** 
* 函数：判断滚轮滚动方向 
* 作者：walkingp 
* 参数：event 
* 返回：滚轮方向 1：向上 -1：向下 
*************************/ 
var scrollFunc=function(e){ 
var direct=0; 
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; 
} 
ScrollText(direct); 
} 
/*注册事件*/ 
if(document.addEventListener){ 
document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari </script> 


  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


js中鼠标滚轮事件详解(firefox多浏览器) - 文章图片


Chrome


js中鼠标滚轮事件详解(firefox多浏览器) - 文章图片


Firefox


js中鼠标滚轮事件详解(firefox多浏览器) - 文章图片


IE(8)


js中鼠标滚轮事件详解(firefox多浏览器) - 文章图片


IE(6)


 


js中鼠标滚轮事件详解(firefox多浏览器) - 文章图片


Opera


js中鼠标滚轮事件详解(firefox多浏览器) - 文章图片


Safari

内容总结

以上是互联网集市为您收集整理的js中鼠标滚轮事件详解(firefox多浏览器)全部内容，希望文章能够帮你解决js中鼠标滚轮事件详解(firefox多浏览器)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/371963.html

来源：【匿名】