Javascript和jquery事件--鼠标滚轮事件WheelEvent
<1>js事件
滚轮事件在js中,不同浏览器还是有不同的,介于我只测试谷歌和火狐浏览器的情况,其他浏览器有待自行探索。有三种写法:
- target.onmousewheel = wheel; 谷歌浏览器支持,火狐浏览器不支持,网上说的是除火狐浏览器外都支持。
- target.addEventListener(‘wheel’,wheel);谷歌浏览器支持,火狐浏览器现在也支持了,网上说的是除火狐浏览器外都支持。
- target.addEventListener(‘DOMMouseScroll’,wheel)只有火狐浏览器支持。
在以上三种方法中,target.addEventListener(‘wheel’,function(){});是最通用的,3大概不怎么用了,如果需要兼容低版本的火狐浏览器你可以加上判断。火狐浏览器同时支持whell和DOMMouseScroll监听器,不支持onmousewheel,但是如果你为元素设置这两个监听器,它会触发两次。你如果同时为谷歌浏览器设置whell和onmousewheel,onmousewheel会失效,但是你为wheel绑定两个监听器是有效的。
在js中,除了设置监听器外,我们还需要了解到鼠标滚轮的方向,需要关注两个值:event.wheelDelta(正负120)(除了火狐),大多以负数向下,event.detail(正负3)(火狐浏览器特有),以正数为向下,下面是网上的一个通用判断函数。
//统一处理滚轮滚动事件
function wheel(event){
console.log(event);
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta,并且值为“正负120”
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;//opera取反处理
} else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
delta = -event.detail/3;//因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理
} if (delta)
handle(delta);
} //上下滚动时的具体处理函数
function handle(delta) {
if (delta <0){//向下滚动
console.log('向下滚动');
}else{//向上滚动
console.log('向上滚动');
}
}
<1>jq事件,相似,下面是一个兼容代码,引自https://www.cnblogs.com/xiangsj/p/6446109.html
$('#contain2').on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox if (delta > 0) { console.log("wheelup"); } else if (delta < 0) { console.log("wheeldown"); }
参考:
Js
https://www.cnblogs.com/caoruiy/p/4694498.html
https://www.cnblogs.com/ysx215/p/7002338.html
https://blog.csdn.net/lijunlinlijunlin/article/details/40711437
jq
https://www.cnblogs.com/xiangsj/p/6446109.html
Javascript和jquery事件--鼠标滚轮事件WheelEvent的更多相关文章
- JavaScript中的鼠标滚轮事件详解
JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...
- jQuery禁用、开启鼠标滚轮事件
1.禁用鼠标滚轮事件 $(document).bind('mousewheel', function(event, delta) {return false;}); 2.开启鼠标滚轮事件,直接解绑事件 ...
- 鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- 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等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...
- JS鼠标滚轮事件解析
一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...
- Qt事件系统之二:鼠标事件和滚轮事件
在Qt中,事件作为一个对象,继承自 QEvent 类,常见的有键盘事件 QKeyEvent.鼠标事件 QMouseEvent 和定时器事件 QTimerEvent 等,与 QEvent 类的继承关系图 ...
随机推荐
- vue踩坑-This relative module was not found
在使用vue.js的日期选择插件 的时候,报错如下 This relative module was not found: * ../calendar.vue in ./node_modules/ba ...
- 9.9递归和动态规划(九)——N皇后
/** * 功能:打印八皇后在8*8棋盘上的各种摆法.当中每一个皇后都不同行.不同列,也不在对角线上. * 这里的"对角线"指的是全部的对角线,不仅仅是平分整个棋盘的那两条对角 ...
- 单线程实现检索当当网泄露的1GB用户数据
新建项目dangdangusersearch 2.编写头文件head.h #ifndef _HEAD_H_ #define _HEAD_H_ #include <stdio.h> ...
- findFocus-获得拥有焦点的控件
所有的view控件有一个findFocus方法,这个方法如下 /** * Find the view in the hierarchy rooted at this view that current ...
- 7.cocos精灵创建和绘制
创建Layer层的类 T2LayerSprite.h #pragma once #include "cocos2d.h" USING_NS_CC; class T2LayerSpr ...
- PCA and Whitening on natural images
Step 0: Prepare data Step 0a: Load data The starter code contains code to load a set of natural imag ...
- 网络流最大流dinic的板子
void add(int u,int v,int w){ e[tot].v=v; e[tot].w=w; e[tot].nt=pre[u]; pre[u]=tot++; e[tot].v=u; e[t ...
- 【习题 8-6 UVA - 1611】 Crane
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 想把数字i从位置j移动到位置i 可以这样. 假设mov(x,y)表示将(x..x+len/2-1)和(x+len/2..y)交换. ...
- Mysql学习总结(13)——使用JDBC处理MySQL大数据
一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 在实际开发中,有时 ...
- 安卓使用WebView下载文件,安卓实现软件升级功能
由于调用系统默认浏览器下载更新,造成用户体验非常不好,所以决定在webview中直接下载系统更新.然后直接安装. 由于要下载,所以必须用webview,联网权限这里不说了,直接写在manifafest ...