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 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
openlayers实现地图测距测面
Sep 25 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字符串截取问题
2006/11/28 PHP
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
公司会计主管岗位责任制
2014/03/01 职场文书
出纳会计岗位职责
2014/03/12 职场文书
学校清明节活动总结
2014/07/04 职场文书
日语专业求职信
2014/07/04 职场文书
小学教师自我评价
2015/03/04 职场文书
个人工作能力自我评价
2015/03/05 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书