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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
瀑布流布局代码一例
Apr 11 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
星际争霸任务指南——神族
2020/03/04 星际争霸
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
PHP与以太坊交互详解
2018/08/24 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
Js四则运算函数代码
2012/07/21 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JS原型链怎么理解
2016/06/27 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
JavaScript实现区块链
2018/03/14 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
行政助理的职责
2013/11/14 职场文书
秘书岗位职责
2013/11/18 职场文书
临床专业自荐信
2014/06/22 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
公司总经理岗位职责
2015/04/01 职场文书