封装鼠标滚轮事件_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(只有 ...
随机推荐
- 通过 CALayer 代理方法绘图
#import "ViewController.h" #define WIDTH 50 #define PHOTO_HEIGHT 150 @interface ViewContro ...
- iOS - UI - UITextView
1.UITextView //因为继承于UIScrollView 拥有scrollView的所有属性和方法 //placeholder只有UITextField有,UITextView是没有的.(提示 ...
- 《Cortex-M0权威指南》之Cortex-M0编程入门
转载请注明来源:cuixiaolei的技术博客 嵌入式系统编程入门 微控制器是如何启动的 为了保存编译号的二进制程序代码,大多数的现代微控制器都会包含片上flash存储器.有些微控制器还可能有一个独立 ...
- Android的Task和Activity相关
android:allowTaskReparenting 用来标记Activity能否从启动的Task移动到有着affinity的Task(当这个Task进入到前台时)——“true”,表示能移 ...
- linux初学 :linux 常用命令(二)
压缩和解压命令 gzip/guzip zip/unzip tar gzip和gunzip一般可用参数是-r,例: gzip test.txt 压缩文件 gzip -r test 压缩所有tes ...
- ASP.NET自定义错误页面
ASP.NET自定义错误页面 ASP.NET 提供三种用于在出现错误时捕获和响应错误的主要方法:Page_Error 事件.Application_Error 事件以及应用程序配置文件 (Web.co ...
- Smarty安装配置方法
下载最新的Smarty:http://smarty.php.net/ 解压后将目录中的libs目录重命名为smarty,复制到你的网站目录,同时在网站根目录下建立templates和templates ...
- thinkphp,javascript跨域请求解决方案
javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...
- 【NodeJS】---express配置ejs mongoose route等
express创建项目 命令行下: express prj_name cd prj_name && npm install ejs html var ejs = require('ej ...
- php学习笔记7--php中的数组
php中的数组 1.数组的定义:显式方式:$arr = array(1,2,3,4,5); $arr1 = array('name'=>'dqrcsc','age'=>'24');隐式方式 ...