js滚轮事件兼容性问题需要注意哪些


Posted in Javascript onNovember 15, 2016

本文实例为大家解析了js滚轮事件需要注意的兼容性问题,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  #div {
   width: 300px;
   height: 300px;
   background: red;
  }
 </style>
 <script>
  function addEvent(obj,sEv,fn){
   if(obj.addEventListener){
    return obj.addEventListener(sEv,fn,false);
   }else{
    return obj.attachEvent('on' + sEv,fn);
   }
  }

  function addWheel(obj,fn){
   function wheel(ev){
    var oEvent = ev || event;
    var bDown = true;
    bDown = oEvent.wheelDelta?oEvent.wheelDelta > 0:oEvent.detail < 0;
    fn && fn(bDown);
    oEvent.preventDefault && oEvent.preventDefault();
    return false;
   }
------------------------------------------------------------------
return false阻止浏览器默认行为,遇到绑定添加的事件的时候就失效了;
所有要用oEvent.preventDefault();在使用此方法前要做判断;
------------------------------------------------------------------
   if(window.navigator.userAgent.indexOf('Firefox') !=-1){
    obj.addEventListener('DOMMouseScroll',wheel,false);注:所有以DOM开头的只能通过事件绑定的形式添加此事件;
   }else{
    addEvent(obj,'mousewheel',wheel);
   }
  }
-------------------------------------------------------------------------------------------------
 obj.onmousewheel:滚动鼠标滚轮的时候触发;兼容IE系列和chrome;
 DOMMouseScroll:只能通过事件绑定的形式添加此事件;只兼容FF;
 兼容性问题解决方案:判断浏览器;
 oEvent.wheelDelta:不兼容FF;火狐下报undefined;
  chrome&&IE:
   下:-120;//以具体弹出数字为准
   上:120;

 oEvent.detail:
  FF:
   下:3;//以具体弹出数字为准
---------------------------------------------------------------------------------------------------
  window.onload = function () {
   var oDiv = document.getElementById('div');
   addWheel(oDiv,function(bDown){
    oDiv.onmousewheel = null;
    if(bDown){
     oDiv.style.height = oDiv.offsetHeight - 10 + 'px';
    }else{
     oDiv.style.height = oDiv.offsetHeight + 10 + 'px';
    }
   });
  }
 </script>
</head>
<body>
<div id="div"></div>
</body>
</html>

滚轮事件的兼容性问题比较多,所以大家在实现这个效果的时候也要随时测试兼容性的问题。

暂时整理的大概就这些,还有很多不足的地方,大家多提宝贵意见!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现颜色渐变的方法
Oct 30 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
vue实现评价星星功能
Jun 30 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 #Javascript
sea.js常用的api简易文档
Nov 15 #Javascript
js实现倒计时及时间对象
Nov 15 #Javascript
Bootstrap简单表单显示学习笔记
Nov 15 #Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 #Javascript
js调用屏幕宽度的简单方法
Nov 14 #Javascript
jquery心形点赞关注效果的简单实现
Nov 14 #Javascript
You might like
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
prototype class详解
2006/09/07 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
python破解zip加密文件的方法
2018/05/31 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python 硬币兑换问题
2019/07/29 Python
python全栈开发语法总结
2020/11/22 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
函授本科自我鉴定
2013/11/03 职场文书
写给女生的道歉信
2014/01/08 职场文书
房产电话营销开场白
2015/05/29 职场文书
创业计划书介绍
2019/04/24 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
golang正则之命名分组方式
2021/04/25 Golang
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang