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 类的继承关系图 ...
随机推荐
- ssm框架的多表查询和增删查改
必须声明本文章==>http://www.cnblogs.com/zhu520/p/7883273.html 一: 1):我的运行环境 我使用myeclipse(你也可以使用eclipse),t ...
- CodeForces 321 A - Ciel and Robot
[题目链接]:click here~~ [题目大意]:一个robot 机器人 .能够依据给定的指令行动,给你四种指令,robot初始位置是(0,0).指令一出.robot会反复行动,推断是否能在无限行 ...
- RvmTranslator6.2 is released
RvmTranslator6.2 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...
- Google开源新的 RISC-V IP核: “BottleRocket”(https://cnrv.io)
BottleRocket是RISCV RV32IMC的实现. Google在2017年11月29日在Github上非官方开源了BottleRocket的RTL代码,同时表明这并不是一个官方支持的Goo ...
- js设计模式--------基本概念的理解
1.闭包,前面已经说过,这里不再做说明 2.封装 对于JS而言,他不像java一样存在私有,公有 ,可以让对象在一些细节方面存在差异,降低他们的耦合程度,对数据做一些约束,我们可以更容易调试,封 ...
- CSS的导入方式:link与import方式的区别
在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...
- MarkDown study:
#MarkDown study:## 区块元素:### 段落和换行 段落:由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行.比方说,若某一行只 ...
- spring三大框架整合
Spring概述 Spring介绍 Spring它是一个一站式的分层轻量级框架. Spring体系结构 1. core container a) beans与core ...
- 【习题 8-9 1613】 K-Graph Oddity
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 感觉最大度数|1就是最多需要的个数了. 就贪心一下. 然后模拟染色的过程就可以了. (贪心染色就可以了 (看看周围哪个颜色没有,就用 ...
- Codeforces #258 Div.2 E Devu and Flowers
大致题意: 从n个盒子里面取出s多花.每一个盒子里面的花都同样,而且每一个盒子里面花的多数为f[i],求取法总数. 解题思路: 我们知道假设n个盒子里面花的数量无限,那么取法总数为:C(s+n-1, ...