Mouse Wheel Programming In JavaScript

weapon 发布于2019-08-21 12:17 / 1154人阅读

摘要：在编程当中经常会用到鼠标滚轮事件，但是要实现这个效果不得不考虑兼容情况存在的兼容性问题事件对象兼容，是，而只需要传个参数就行滚轮事件使用，而就独树一帜，使用获取滚轮的值使用的事件对象的，而采用的是向上滚动为，向下滚动为向上滚动为，向下滚

在JS编程当中经常会用到鼠标滚轮事件，但是要实现这个效果不得不考虑兼容情况

存在的兼容性问题：

事件对象兼容，IE是window.event，而FF只需要传个参数（event）就行

滚轮事件：IE/Chrome 使用onmousewheel，而FF就独树一帜，使用DOMMouseScroll

获取滚轮的值：IE/Chrome使用onmousewheel的事件对象event的wheelDelta，而FF采用的是detail

IE/Chrome向上滚动为120，向下滚动为-120；FF向上滚动为-3，向下滚动为3

贴码：

var oDelta=document.getElementById("Delta");
var num=0;
function mouseScroll(e){
    //事件对象兼容
    var e=e||window.event;
    var down=null;
    if(e.wheelDelta){
        down=e.wheelDelta;//IE,Chrome
    }else{
        down=-e.detail;//FF,注意负号
    }
    counter(down);
}

//添加事件
if(document.addEventListener){document.addEventListener("DOMMouseScroll",mouseScroll,false);}//FF
document.onmousewheel=mouseScroll;//IE/Chrome

//计数
function counter(count){
    if(count>0){
        oDelta.value=num++;
    }else if(count<0){
        oDelta.value=num--;
    }
}

注：至于其他浏览器：如Opera，Safari.本人没有测试，查资料（传送门）得知，和IE/Chrome一样，只有FF独特

云服务器 GPU云服务器 javascript in wheel Mouse mouse事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87531.html

python setup.py 浅析

摘要：浅析参数说明对于所有列表里提到的纯模块做处理需要在脚本里有一个包名到目录的映射。阐明包名到目录的映射，见键代表了包的名字，空的包名则代表不在任何包中的顶层包。最终会在下生成可执行文件，调用制定的函数实例分析 python setup.py 浅析 setuptools.setup() 参数说明 packages 对于所有 packages 列表里提到的纯 Python 模块做处理需要...

sevi_stuo 2019-07-31 11:20 评论0 收藏0
jquery插件Nicescroll 3(非常类似IOS原生的滚动条) （转）

摘要：使用了很多的滚动条插件，如这次说说，支持水平滚动条，支持文本区和文档页面滚动条。，兼容所有的桌面浏览器。，兼容移动设备黑莓手机和芒果。，兼容所有触摸设备平板电脑窗口接口。，简单的安装和激活不破坏代码。使用了很多的滚动条插件，如Iscroll,swiper,这次说说Nicescroll 1，支持水平滚动条! 2，支持div,IFrames,文本区和文档页面滚动条。 3，兼容所有的桌面...

B0B0 2019-08-21 10:54 评论0 收藏0
通过demo学习OpenStack开发所需的基础知识 -- 软件包管理

摘要：不幸的是，在软件包管理十分混乱，至少历史上十分混乱。的最大改进是将函数的参数单独放到一个的文件中这些成为包的元数据。基于的版本号管理。的版本推导这里重点说明一下基于的版本号管理这个功能。开发版本号的形式如下。为什么写这个系列 OpenStack是目前我所知的最大最复杂的基于Python项目。整个OpenStack项目包含了数十个主要的子项目，每个子项目所用到的库也不尽相同。因此，对于...

blastz 2019-07-31 11:39 评论0 收藏0
React系列 --- Jsx, 合成事件与Refs(二)

摘要：系列系列简单模拟语法一系列合成事件与二系列算法实现分析三系列从到再到四系列与部分源码解析五系列从使用了解的各种使用方案六的诞生他是的一种扩展语法。这个函数接受组件的实例或元素作为参数，以存储它们并使它们能被其他地方访问。 React系列 React系列 --- 简单模拟语法(一)React系列 --- Jsx, 合成事件与Refs(二)React系列 --- virtualdom di...

LiuZh 2019-08-26 10:37 评论0 收藏0
javascript之模拟类继承

摘要：欢迎关注我的博客正文让我来构造函数其实，模拟一个类的方式非常的简单构造函数。我们先来看一个例子这里通过构造函数模拟出来的类，其实和其他语言的类行为上是基本一致的，唯一的区别就是它不具备私有方法。前言 ES6时代的来临，使得类继承变得如此的圆滑。但是，你有思考过ES6的类继承模式吗？如何去实现它呢？类继承对于JavaScript来说，实现方式与Java等类语言大不相同。熟悉JavaS...

Jochen 2019-08-22 11:07 评论0 收藏0