封装鼠标滚轮事件_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(只有 ...
随机推荐
- 多线程和并发管理 .NET多线程服务
线程相关静态变量 默认静态变量应用程序域所有线程可见.如果静态变量需要在线程间共享,同步访问也就必然了. 线程相关静态变量保证线程安全,同一时间只有一个线程可访问,且每个线程都有该静态变量的拷贝. p ...
- 一、Android应用程序的基本原理(Fundamentals [,fʌndə'mentlz])
Android 应用程序以java作为编程语言.Android SDK工具把代码连同数据.资源文件一起编译成一个以.apk为后缀(suffix)的android 程序存档(archive)文件包.在一 ...
- 通过继承nsoperation的方法--处理复杂任务
#import <Foundation/Foundation.h> @class TTOperation; @protocol TTOperationDelegate <NSObje ...
- 【Python千问 2】Python核心编程(第二版)-- 欢迎来到Python世界
1.1 什么是Python 继承了传统编译语言的强大性和通用性,同时也借鉴了简单脚本和解释语言的易用性. 1.2 起源 来源于某个项目,那些程序员利用手边现有的工具辛苦工作着,他们设想并开发了更好的解 ...
- Solr中Schema.xml中文版
<?xml version="1.0" encoding="UTF-8" ?> <!-- Licensed to the Apache Sof ...
- 【java.math.BigInteger】【转】常见问题
好大的链接给原作 Q: 在java怎样将BigInteger类型的数据转成int类型的? A:BigInteger的intValue()可以获得int类型数值. Q: java.math.BigInt ...
- poj 1330 Nearest Common Ancestors 裸的LCA
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...
- AIX学习笔记(更新中)
AIX操作系统基本命令 系统的进入和退出login: 输入用户名(例如:user01)password: 输入用户口令若用户名及口令均正确,则用户将登陆成功.此时系统会出现命令提示符 $或#,即表示可 ...
- HttpServletResponse接口
public interface HttpServletResponse extends ServletResponse 描述一个返回到客户端的HTTP回应.这个接口允许Servlet程序员利用HTT ...
- Oracle数据库作业-4 查询
9. 查询"95031"班的学生人数.