<1>js事件

滚轮事件在js中,不同浏览器还是有不同的,介于我只测试谷歌和火狐浏览器的情况,其他浏览器有待自行探索。有三种写法:

  1. target.onmousewheel = wheel; 谷歌浏览器支持,火狐浏览器不支持,网上说的是除火狐浏览器外都支持。
  2. target.addEventListener(‘wheel’,wheel);谷歌浏览器支持,火狐浏览器现在也支持了,网上说的是除火狐浏览器外都支持。
  3. 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的更多相关文章

  1. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  2. jQuery禁用、开启鼠标滚轮事件

    1.禁用鼠标滚轮事件 $(document).bind('mousewheel', function(event, delta) {return false;}); 2.开启鼠标滚轮事件,直接解绑事件 ...

  3. 鼠标滚轮事件MouseWheel

    其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...

  4. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  5. js整频滚动展示效果(函数节流鼠标滚轮事件)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS鼠标滚轮事件详解

    鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...

  7. js鼠标滚轮事件兼容

    JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...

  8. JS鼠标滚轮事件解析

    一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...

  9. Qt事件系统之二:鼠标事件和滚轮事件

    在Qt中,事件作为一个对象,继承自 QEvent 类,常见的有键盘事件 QKeyEvent.鼠标事件 QMouseEvent 和定时器事件 QTimerEvent 等,与 QEvent 类的继承关系图 ...

随机推荐

  1. ssm框架的多表查询和增删查改

    必须声明本文章==>http://www.cnblogs.com/zhu520/p/7883273.html 一: 1):我的运行环境 我使用myeclipse(你也可以使用eclipse),t ...

  2. CodeForces 321 A - Ciel and Robot

    [题目链接]:click here~~ [题目大意]:一个robot 机器人 .能够依据给定的指令行动,给你四种指令,robot初始位置是(0,0).指令一出.robot会反复行动,推断是否能在无限行 ...

  3. RvmTranslator6.2 is released

    RvmTranslator6.2 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...

  4. Google开源新的 RISC-V IP核: “BottleRocket”(https://cnrv.io)

    BottleRocket是RISCV RV32IMC的实现. Google在2017年11月29日在Github上非官方开源了BottleRocket的RTL代码,同时表明这并不是一个官方支持的Goo ...

  5. js设计模式--------基本概念的理解

    1.闭包,前面已经说过,这里不再做说明 2.封装    对于JS而言,他不像java一样存在私有,公有 ,可以让对象在一些细节方面存在差异,降低他们的耦合程度,对数据做一些约束,我们可以更容易调试,封 ...

  6. CSS的导入方式:link与import方式的区别

    在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...

  7. MarkDown study:

    #MarkDown study:## 区块元素:### 段落和换行 段落:由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行.比方说,若某一行只 ...

  8. spring三大框架整合

        Spring概述 Spring介绍 Spring它是一个一站式的分层轻量级框架. Spring体系结构 1.      core container a)        beans与core ...

  9. 【习题 8-9 1613】 K-Graph Oddity

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 感觉最大度数|1就是最多需要的个数了. 就贪心一下. 然后模拟染色的过程就可以了. (贪心染色就可以了 (看看周围哪个颜色没有,就用 ...

  10. Codeforces #258 Div.2 E Devu and Flowers

    大致题意: 从n个盒子里面取出s多花.每一个盒子里面的花都同样,而且每一个盒子里面花的多数为f[i],求取法总数. 解题思路: 我们知道假设n个盒子里面花的数量无限,那么取法总数为:C(s+n-1, ...