<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. vue踩坑-This relative module was not found

    在使用vue.js的日期选择插件 的时候,报错如下 This relative module was not found: * ../calendar.vue in ./node_modules/ba ...

  2. 9.9递归和动态规划(九)——N皇后

    /**  * 功能:打印八皇后在8*8棋盘上的各种摆法.当中每一个皇后都不同行.不同列,也不在对角线上.  * 这里的"对角线"指的是全部的对角线,不仅仅是平分整个棋盘的那两条对角 ...

  3. 单线程实现检索当当网泄露的1GB用户数据

     新建项目dangdangusersearch 2.编写头文件head.h #ifndef _HEAD_H_ #define _HEAD_H_ #include <stdio.h>   ...

  4. findFocus-获得拥有焦点的控件

    所有的view控件有一个findFocus方法,这个方法如下 /** * Find the view in the hierarchy rooted at this view that current ...

  5. 7.cocos精灵创建和绘制

    创建Layer层的类 T2LayerSprite.h #pragma once #include "cocos2d.h" USING_NS_CC; class T2LayerSpr ...

  6. 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 ...

  7. 网络流最大流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. 【习题 8-6 UVA - 1611】 Crane

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 想把数字i从位置j移动到位置i 可以这样. 假设mov(x,y)表示将(x..x+len/2-1)和(x+len/2..y)交换. ...

  9. Mysql学习总结(13)——使用JDBC处理MySQL大数据

    一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 在实际开发中,有时 ...

  10. 安卓使用WebView下载文件,安卓实现软件升级功能

    由于调用系统默认浏览器下载更新,造成用户体验非常不好,所以决定在webview中直接下载系统更新.然后直接安装. 由于要下载,所以必须用webview,联网权限这里不说了,直接写在manifafest ...