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
)
相关文章
- Node.js API实例——Node.js 控制台
- Node.js 入门
- nodeJs基础教程系列(3)——建立githubs项目
- nodeJs基础教程系列(1)——安装Node.js
- nodeJs基础教程系列(6)——Promise 模式的Q库
- Atom 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器
- bootstrap 3.3 模态框垂直居中问题
- js字符串操作
- js鼠标滑轮滚动事件绑定(兼容主流浏览器)
- 视频:Windows 安装FTP服务 (基于Windows2008 IIS配置FTP站点 )
- 屌丝为什么找不到女朋友
- nodejs 利用GraphicsMagick和gm组件创建图片缩略图