Java怎么监听鼠标滑轮的转向_javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。
不同浏览器不同的事件
首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件。
另外在操作的过程中需要添加事件监听,代码如下:兼容firefox采用addEventListener监听
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
js返回数值判断滚轮上下
判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
具体的代码如下所示:
滚动值:(IE/Opera)
滚动值:(Firefox)
var scrollFunc=function(e){
e=e || window.event;
var t1=document.getElementById("wheelDelta");
var t2=document.getElementById("detail");
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
通过运行上述代码我们可以看到:
在非firefox浏览器中,滚轮向上滚动返回的数值是120,向下滚动返回-120
而在firefox浏览器中,滚轮向上滚动返回的数值是-3,向下滚动返回3
代码部分如下,e.wheelDelta是判断是否为非firefox浏览器,e.detail为firefox浏览器
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
PS:这里再为大家推荐一款关于JS事件的在线查询工具,归纳总结了JS常用的事件类型与函数功能:
javascript事件与功能说明大全:
Java怎么监听鼠标滑轮的转向_javascript监听鼠标滚轮事件浅析相关推荐
- html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监 ...
- java设置鼠标轮滑,Win10专业版的鼠标滑轮速度怎么设置?Win10专业版鼠标轮滑设置教程...
在Win10专业版系统上,鼠标滚轮的滚动速度默认设置为3,不过你可以您的喜好更改鼠标或触摸板滚动速度.那么Win10专业版的鼠标滑轮速度怎么设置呢?一起来学习一下吧! Win10专业版的鼠标滑轮速度怎 ...
- html鼠标滑轮事件,js鼠标滚轮上下滚动监听事件应用实例(跨浏览器,亲测)
最近做项目涉及到多个DIV切换效果,包括普通按钮点击切换和鼠标滚轮上下滚动切换等:其主要涉及到的内容就是鼠标滚轮上下切换的事件监听,在此记录一下:也希望能帮到各位有需要的朋友. 以下为项目实例: $( ...
- java 多个监听_java中监听一个客户端怎么做?监听多个怎么做?
随着时代的不断进步与发展,人们对于科学技术的使用也越来越普遍化.人们都开始自己学习编程语言以更好的适应时代的发展.今天就来为大家介绍一下,java中监听一个客户端怎么做?监听多个怎么做?一起来看看吧. ...
- 鼠标案例2-鼠标移动监听
要完成: 监听:鼠标移动到label内,发生一些事情 移动到label外发生一些事情 重写移动函数文档:鼠标案例2-鼠标移动监听.note 链接:http://note.youdao.com/note ...
- js对于鼠标滚轮事件的监听
实现: 通过js对鼠标滚轮的事件进行监听. 描述: 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox ...
- java控制鼠标滑轮的滚动速度来滚动滚动面板和鼠标滑轮滚动事件
//虽然比较短,但还是分享下吧....就当是个随笔吧- //设置滚动面板的滚动速度 JScrollPane.getVerticalScrollBar().setUnitIncrement(10); / ...
- java响应鼠标滚轮事件_javascript滚动条响应鼠标滑轮的实现上下滚动事件
实现鼠标滚动滚轮事件: var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e ...
- android 鼠标滚轮事件监听
/** * Implement this method to handle generic motion events. * 实现该方法来处理一般的MotionEvent: * 一般的motion e ...
最新文章
- Kafka如果丢了消息,怎么处理的?
- Python 安装zbar-py时出现 无法打开包括文件: “unistd.h” no such file or directory
- IAR建立stm32工程
- 卢卡斯定理及其卢卡斯定理的拓展
- tensflow中加载 fashion_mnist 数据集时
- HTML5基础一:常用布局标签
- iperf 测试局域网速度
- ViewPager与Tab结合使用
- MacPE+WinPE-黑苹果之路
- python+selenium+unittest测试框架3-项目构建和发送邮件
- python之udp
- 【学习笔记】TRIZ 40个创新原理及解析
- Unity 模拟鼠标点击
- 8行代码实现发微信撩妹(汉语哦)
- div 设置a4大小_网页打印时设置A4大小
- python两台电脑网络互传信息_两台电脑在同一网络下如何互传文件
- 78系列79系列稳压芯片
- 前端面试题 —— 飞机加油问题
- 【线性代数】结合 Ax=b 的通解结构,直观理解秩、线性变换、相关无关、基础解系
- TortoiseGit配合msysGit