封装鼠标滚轮事件_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(只有 ...
随机推荐
- IOS 关于ipad iphone5s崩溃 解决
之前 我这一直没有以上两款测试机 于是发布被退回了.说是这两款 开启动就崩. 这种情况下 解决办法只有一个,就是bug重现,不然,你根本无法确定再一次提交是否是安全的.所以我借了一台 iPad mi ...
- iOS 应用程序的生命周期
iOS 应用程序的生命周期(网络资源总结) http://blog.csdn.net/totogo2010/article/details/8048652 http://www.cocoachina. ...
- C++中模板函数或模板类中关键词class和typename
##区别 基本上来说,class和typename几乎没有区别.在可以使用class的地方都可以使用typename,在使用typename的地方也几乎可以使用class. 可以看出我加黑了两个子:几 ...
- oracle PL/SQL(procedure language/SQL)程序设计(在PL/SQL中使用SQL)
在PL/SQL程序中,允许使用的SQL语句只有DML和事务控制语句,使用DDL语句是非法的.使用SELECT语句从数据库中选取数据时,只能返回一行数据.使用COMMIT, ROLLBACK, 和SA ...
- 解决eclipse配置Tomcat时找不到server选项
集成Eclipse和Tomcat时找不到server选项: 按照网上的步骤如下: 在Eclipse中,窗口(window)——首选项(preferences)——服务器(Server)——运行时环境( ...
- 获取数组排序后的index算法实现
需求: 一个数组var arr = [4,7,2,9],排序后的新数组var newArr = [2,4,7,9]或者[9,7,4,2] 我们要得到的是排序后元数组的每一项在新数组中的位置所构成的数组 ...
- Eclipse中web项目的默认发布路径改为外部Tomcat中webapp路径
可参考http://www.cnblogs.com/mihu/p/4772509.html 和http://www.cnblogs.com/dyllove98/archive/2013/06/07/3 ...
- Linux 内存管理子系统
一.内存管理子系统 1 . 内存管理模块 功能: 虚拟地址到物理地址的映射 32位系统访问的地址一共4G: 0-3G : 应用程序 3G+896M :直接映射 , Vmollat区,永久内存映射,固定 ...
- 十大Intellij IDEA快捷键(转)(2015年06月15日)
注:本文转自:http://blog.csdn.net/dc_726/article/details/42784275 Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow ...
- C#_枚举类型
C#中的枚举是名/值对的数据类型,下面是自定义的军衔等级的枚举 //定义枚举 enum MilitaryRank { Commander, ArmyCorpCommander, Military ...