javascript实现禁止鼠标滚轮事件


Posted in Javascript onJuly 24, 2015

平时我们兼容什么东西总是在调整低版本IE的兼容性,但是这回不是因为低版本浏览器不给力。而是因为火狐给力过头了,完全不顾其它浏览器的感受标新立异了。除了火狐之外,所有的浏览器都可以使用MouseWheel事件来处理鼠标滚轮的响应。但是火狐却偏偏不支持MouseWheel,而使用无厘头的DOMMouseScroll,这玩意儿除了火狐以外其它浏览器都不兼容。也就是说,对于鼠标滚轮事件的处理,火狐只能使用DOMMouseScroll。而非火狐则只能使用MouseWheel。这两种事件实现的原理不同,他们处理的数据也不同。

var firefox = navigator.userAgent.indexOf('Firefox') != -1;
firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : 
     (img.onmousewheel = MouseWheel);
 
  function MouseWheel(e) {
    e = e || window.event;
 
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
     
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
 
  }

我们来看个完整的代码

<!DOCTYPE html>
<style>
span {font:14px/20px 微软雅黑;}
#counter {
 width:50px;height:20px;
 border:1px solid #CCC;
 background:#F9F9F9;
 font:14px/20px Consolas;
 text-align:center;
 margin:10px;
}
</style>
<span>使用鼠标滚轮调整数值大小</span><br/>
<div id="counter">0</div>
<script>
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE?isIE[1]:undefined;
var isFF=/FireFox/i.test(navigator.userAgent);
//获取元素
var counter=document.getElementById("counter");
//鼠标滚轮事件
if(isIE<9) //传统浏览器使用MouseWheel事件
 counter.attachEvent("onmousewheel",function(){
  //计算鼠标滚轮滚动的距离
  //一格3行,每行40像素,所以除以120
  var v=event.wheelDelta/120;
  counter.innerHTML=counter.innerHTML*1+v;
  //阻止浏览器默认方法
  return false;
 });
else if(!isFF) //除火狐外的现代浏览器也使用MouseWheel事件
 counter.addEventListener("mousewheel",function(e){
  //计算鼠标滚轮滚动的距离
  var v=e.wheelDelta/120;
  counter.innerHTML=counter.innerHTML*1+v;
  //阻止浏览器默认方法
  e.preventDefault();
 },false);
else //奇葩的火狐使用DOMMouseScroll事件
 counter.addEventListener("DOMMouseScroll",function(e){
  //计算鼠标滚轮滚动的距离
  //一格是3行,但是要注意,这里和像素不同的是它是负值
  var v=-e.detail/3;
  counter.innerHTML=counter.innerHTML*1+v;
  //阻止浏览器默认方法
  e.preventDefault();
 },false);
</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
Css3制作变形与动画效果
Jul 24 #Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 #Javascript
基于JS实现的倒计时程序实例
Jul 24 #Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 #Javascript
javascript比较两个日期相差天数的方法
Jul 24 #Javascript
JAVA四种基本排序方法实例总结
Jul 24 #Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 #Javascript
You might like
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python装饰器使用方法实例
2013/11/21 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python3中zip()函数使用详解
2018/06/29 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
师德演讲稿范文
2014/05/06 职场文书
人大代表选举标语
2014/10/07 职场文书
个人合伙协议书范本
2014/10/14 职场文书
新郎答谢词
2015/01/04 职场文书
500字小学生检讨书
2015/02/19 职场文书
自我推荐信怎么写
2015/03/24 职场文书