封装鼠标滚轮事件_mousewheel
function mousewheel(obj,fn){ obj.onmousewheel===null ? obj.onmousewheel=fun : obj.addEventListener('DOMMouseScroll',fun,false); function fun(e){
var e=e || event,
num=0; if(e.wheelDelta){
num=e.wheelDelta>0?1:-1;
}else{
num=e.detail<0?1:-1;
}
fn(num); if(e.preventDefault)e.preventDefault();
return false;
}
}
使用方法:
var oDiv=document.getElementById('div'); mousewheel(oDiv,function(dir){
if(dir>0) alert('向上滚动');
if(dir<0) alert('往下滚动');
});
兼容性:ie6+吧(只测试了ie6+,chrome、Firefox)
注释一点点:
ie/chrome: onmousewheel
ev.wheelDelta:
上:120
下:-120
ff: addEventListener('DOMMouseScroll',fn,false) 火狐用鼠标事件要用addEventListener绑定
ev.detail:
上:-3
下:3
阻止默认事件:
return false 用于阻止一般形式的事件(如:on+事件名称)的默认行为
ev.preventDefault() 用于阻止addEventListener绑定的事件的默认行为
封装鼠标滚轮事件_mousewheel的更多相关文章
- VC 鼠标滚轮事件控制绘图的问题
问题描述: 在MFC中绘制数据曲线,通过鼠标滚轮来进行放大缩小操作.在使用滚轮事件时,发现如果数据量较大,会出现卡顿. 解决方案: 鼠标滚轮事件会进行重复绘图,考虑在鼠标滚轮结束之后再重绘: 在鼠标滚 ...
- js鼠标滚轮事件
不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; conso ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- JavaScript中的鼠标滚轮事件详解
JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...
- js整频滚动展示效果(函数节流鼠标滚轮事件)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS鼠标滚轮事件详解
鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...
- js鼠标滚轮事件兼容
JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...
- jQuery禁用、开启鼠标滚轮事件
1.禁用鼠标滚轮事件 $(document).bind('mousewheel', function(event, delta) {return false;}); 2.开启鼠标滚轮事件,直接解绑事件 ...
- JS鼠标滚轮事件解析
一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...
随机推荐
- Json.Net学习(1) 实现简单的序列化和反序列化
Attributes 可以用来控制Json.Net如何序列化和反序列化.Net对象. >JsonObjectAttribute--标记在类上,用于控制该类如何被序列化为一个Json对象(JSON ...
- Bus Pass
ZOJ Problem Set - 2913 Bus Pass Time Limit: 5 Seconds Memory Limit: 32768 KB You travel a lot b ...
- [Java] Eclipse+Spring学习(一)环境搭建
转自:http://blog.sina.com.cn/s/blog_7c3736810100qhia.html 最近由于投了一家公司实习,他要java工程师,而我大学3年的精力都花到了ASP.NET和 ...
- [Java] 模拟HTTP的Get和Post请求
在之前,写了篇Java模拟HTTP的Get和Post请求的文章,这篇文章起源与和一个朋友砍飞信诈骗网站的问题,于是动用了Apache的comments-net包,也实现了get和post的http请求 ...
- Android小项目之六 apk下载
------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...
- Http StatuCode说明
HTTP 200 - 文件被正常的访问 HTTP 302 - 临时重定向 HTTP 400 - 请求无效 HTTP 401.1 - 未授权:登录失败 HTTP 401.2 - 未授权:服务器配置问题导 ...
- Lnmp下安装memcached
Lnmp下安装memcached 1.先安装 libevent,再安装 Memcached主程序 # tar xf libevent-2.0.21-stable.tar.gz # cd ...
- HDU 1875 畅通工程再续 (最小生成树)
畅通工程再续 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- 转:从三层架构到MVC-MVP
当然这种架构模式本身的一些问题也会在接下来的内容就加以介绍,另外就是如果大家有什么不同观点的话,欢迎拍砖(只要不打脸就行,呵呵). 一. MVC是谁提出的 模型-视图-控制器(MVC)是Xerox P ...
- CSS3笔记
CSS/CSS3在线手册:http://www.css119.com/book/css/ CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...