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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
JS监听Esc 键触发事键
Apr 14 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
PHP中文件上传的一个问题
2010/09/04 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
python微信公众号之关键词自动回复
2018/06/15 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
python3实现表白神器
2019/04/09 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python实现多进程通信实例分析
2019/09/01 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
Python实现微信表情包炸群功能
2021/01/28 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
护士岗位职责
2014/02/16 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
新生儿未入户证明
2015/06/23 职场文书
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技