摘要
浏览器的兼容性问题一直让开发人员头疼不已。不同于以往,这次的兼容性问题体现在火狐与其它浏览器的差别上。在PC端中,多数网站的交互重心都放在了鼠标事件上,因此鼠标滚动也是不可或缺的一员。为了开发的方便,我们往往通过函数封装来解决浏览器的兼容性问题,下面一起来看看滚动函数的封装。
浏览器的兼容性问题一直让开发人员头疼不已。不同于以往,这次的兼容性问题体现在火狐与其它浏览器的差别上。在PC端中,多数网站的交互重心都放在了鼠标事件上,因此鼠标滚动也是不可或缺的一员。为了开发的方便,我们往往通过函数封装来解决浏览器的兼容性问题,下面一起来看看滚动函数的封装。
- function mWheel(ev) {
- var ev = ev || event;
- var b;
- // 滚动方向进行统一
- if (ev.wheelDelta) {
- // wheelDelta针对IE、Chrome(向上滚动为正,向下为负)
- b = ev.wheelDelta > 0 ? true : false;
- } else {
- // detail针对Firefox(向上滚动为负,向下为正)
- b = ev.detail < 0 ? true : false;
- }
- if (b) {
- // 此处执行向上滚动要执行的函数
- } else {
- // 此处执行向下滚动要执行的函数
- }
- // 阻止通过addEventListener绑定所触发的默认行为
- if (ev.preventDefault) {
- ev.preventDefault();
- }
- // 阻止通过on绑定所触发的默认行为
- return false;
- }
以oDiv为例
- oDiv.onmousewheel = mWheel;
- // 因为非标准下没有addEventListener,所以需要做判断
- if (oDiv.addEventListener) {
- oDiv.addEventListener('DOMMouseScroll', mWheel, false);
- }
注:
1、IE、Chrome用onmousewheel绑定,Firefox用DOMMouseScroll,并且只能通过addEventListener('DOMMouseScroll', 函数, false)绑定
2、IE、Chrome中鼠标滚动监测使用ev.wheelDetal,Firefox中鼠标滚动监测使用ev.detail
3、return false用于阻止obj.on事件名称或非标下obj.attathEvent('on事件名称', 函数)所触发的默认行为
4、addEventListener绑定的事件触发的默认行为只能通过preventListener阻止