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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
js验证框架实现代码分享
May 18 Javascript
轻松搞定js表单验证
Oct 13 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
React实现评论的添加和删除
Oct 20 Javascript
JavaScript原型链详解
Nov 07 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
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python内置函数OCT详解
2016/11/09 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
基于opencv实现简单画板功能
2020/08/02 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
售后服务科岗位职责范文
2013/11/13 职场文书
车工岗位职责
2013/11/26 职场文书
学生爱国演讲稿
2014/01/14 职场文书
护士毕业生自荐信
2014/02/07 职场文书
校园安全广播稿范文
2014/09/25 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
勇敢的心观后感
2015/06/09 职场文书
公司转让协议书
2016/03/19 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python