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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
jsPDF导出pdf示例
May 02 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
canvas实现贪食蛇的实践
Feb 15 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获取MAC地址的函数代码
2011/09/11 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP数据过滤的方法
2013/10/30 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
使用python创建股票的时间序列可视化分析
2022/03/03 Python