js鼠标滑轮滚动事件绑定(兼容主流浏览器)
今天尝试写基于jquery的滚动条,遇到了滚轮事件的兼容性问题,在firefox下和在IE下以及其它浏览器下,监听的事件有区别,查了下相关资料总结一下不同浏览器下鼠标滚轮事件兼容性的处理方式
今天尝试写基于jquery的滚动条,遇到了滚轮事件的兼容性问题,在firefox下和在IE下以及其它浏览器下,监听的事件有区别,查了下相关资料总结一下不同浏览器下鼠标滚轮事件兼容性的处理方式:
在 firefox 下 需要监听 DOMMouseScroll,即:
if (window.addEventListener) { /** DOMMouseScroll is for mozilla. */ window.addEventListener('DOMMouseScroll', wheel, false); }
在IE或其它浏览器下,这样添加监听就可以了:
window.onmousewheel = document.onmousewheel = wheel;
/** * Created by Administrator on 2015/7/15. */ /** Event handler for mouse wheel event. *鼠标滚动事件 */ $(function(){ var wheel = function(event) { var delta = 0; if (!event) /* For IE. */ event = window.event; if (event.wheelDelta) { /* IE/Opera. */ delta = event.wheelDelta / 120; } else if (event.detail) { /** Mozilla case. */ /** In Mozilla, sign of delta is different than in IE. * Also, delta is multiple of 3. */ delta = -event.detail / 3; } /** If delta is nonzero, handle it. * Basically, delta is now positive if wheel was scrolled up, * and negative, if wheel was scrolled down. */ if (delta) handle(delta); /** Prevent default actions caused by mouse wheel. * That might be ugly, but we handle scrolls somehow * anyway, so don't bother here.. */ if (event.preventDefault) event.preventDefault(); event.returnValue = false; } /** Initialization code. * If you use your own event management code, change it as required. */ if (window.addEventListener) { /** DOMMouseScroll is for mozilla. */ window.addEventListener('DOMMouseScroll', wheel, false); } /** IE/Opera. */ window.onmousewheel = document.onmousewheel = wheel; /** This is high-level function. * It must react to delta being more/less than zero. */ var handle = function(delta) { var random_num = Math.floor((Math.random() * 100) + 50); if (delta < 0) { // alert("鼠标滑轮向下滚动:" + delta + "次!"); // 1 $("#mScroll").val("鼠标滑轮向下滚动:" + delta + "次!"); return; } else { // alert("鼠标滑轮向上滚动:" + delta + "次!"); // -1 $("#mScroll").val("鼠标滑轮向上滚动:" + delta + "次!"); return; } } })
很赞哦! ( 0
)
相关文章
- Nodejs 内容管理系统 DoraCMS-SQL 发布,基于 nodejs + mysql
- Nodejs 内容管理系统 DoraCMS 2.1.7 发布
- 什么是Upstream?
- Nodejs 内容管理系统 DoraCMS 2.1.6 发布
- Visual Studio Online 更新!更好支持Docker、Python、Go、C++
- 利用 html2canvas 生成文章缩略图
- 纪录片《穹顶之下》全集103分钟1080P高清完整视频
- DoraCMS v2.1.5 版本更新
- DoraCMS v2.1.2 Docker 版本(生产环境)
- Nodejs 内容管理系统 DoraCMS 2.1.4 发布
- DoraCMS 插件化探索(一)
- DoraCMS 2.1.4 关于 '指定用户' 功能的优化说明