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(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
js实现网页定位导航功能
Mar 07 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
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仿discuz分页效果代码
2008/10/02 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
php实现记事本案例
2020/10/20 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
学习ExtJS form布局
2009/10/08 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基于pandas数据样本行列选取的方法
2018/04/20 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
中科方德软件测试面试题
2016/04/21 面试题
数控技术专业推荐信
2013/11/01 职场文书
毕业自荐书
2013/12/09 职场文书
中学生励志演讲稿
2014/04/26 职场文书
任命书格式
2014/06/05 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
感谢信的格式
2015/01/21 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
怎样写家长意见
2015/06/04 职场文书
十七岁的单车观后感
2015/06/12 职场文书