热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

解析javascript中鼠标滚轮事件

这篇文章主要给大家详细介绍了javascript中鼠标滚轮事件,图文并茂,十分的详细,有需要的小伙伴可以参考下。

所有的现代浏览器都支持鼠标滚轮,并且在用户滚动滚轮时触发时间。浏览器通常使用鼠标滚轮滚动或缩放文档,但可以通过取消mousewheel事件来阻止这些默认操作。有一些互用性问题影响滚轮事件,但是编写跨平台的代码依旧可以行。除了Firefox之外的所有浏览器都支持“mousewheel”事件,但Firefox使用“DOMMouseScroll”,而3级DOM事件规范草案建议使用事件名“wheel”替代“mousewheel”。

document.body.Onmousewheel= function(event){
  event = event || window.event;
  console.dir(event);
}

Firefox不支持mousewheel

document.body.addEventListener("DOMMouseScroll",function(event){
  console.dir(event);
})

以下滚轮向下滚动是chrome和IE9下面控制台输出

以下是滚轮向下滚动Firefox下面控制台输出

从上面输出得出,可以使用非标准的DOMMouseScroll事件取代mousewheel,使用事件对象的detail属性取代wheelDetal。但是,detail属性值的缩放比率和正负符号不同于wheelDetal,detail值乘以-40和wheelDetal值相等。

在除了FireFox之外的浏览器下,滚动的上下滚动与否是下面这个wheelDelta有关。


根据测试,在我的win7系统下,无论IE7, IE10, Opera12,或者是safari5.1,每次往下滚动event.wheelDelta值都是-120.

对于FireFox浏览器(Opera浏览器也有),判断鼠标滚动方向的属性为event.detail, 向下滚动值为3.

需要注意的是,FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值,而其他浏览器是负值。

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.Onmousewheel= wheelHandler;
//element.Onwheel= wheelHandler; //DOM3级wheel事件,经过测试IE9还是不支持,但是谷歌和火狐都支持,在谷歌内有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

以上所述就是本文的全部内容了,希望大家能够喜欢。


推荐阅读
  • 在跨浏览器开发中,一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理,并提供了最佳实践建议。 ... [详细]
  • 本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作,并介绍了获取本地文件路径的方法。HTML5提供了一系列API,使得这些操作变得更加简便和安全。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文详细探讨了JavaScript中四种获取CSS样式的不同方法:style、currentStyle、getComputedStyle和getBoundingClientRect。每种方法的适用场景及其兼容性问题,并提供了解决方案。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • 本文基于作者使用Flask框架处理后端逻辑和原生JavaScript及jQuery进行前端开发的经验,详细介绍了如何在前后端之间高效地传输JSON数据。文章不仅涵盖了技术实现细节,还提供了实用的代码示例。 ... [详细]
  • Python与MySQL交互指南:从基础到进阶
    本文深入探讨了Python与MySQL数据库的集成方法,包括数据库连接、数据表创建、索引管理、数据操作以及如何防止SQL注入等关键内容。适合初学者及希望提升数据库操作技能的开发者。 ... [详细]
  • 移动端浏览器为了识别用户的双击放大操作,通常会在点击后引入300毫秒的延迟。虽然这种延迟在日常使用中可能不易察觉,但对于需要即时响应的应用(如网页游戏)来说,消除这一延迟至关重要。 ... [详细]
  • Microsoft即将发布WPF/E的CTP(Community Technology Preview)和SDK,标志着RIA(Rich Internet Application)技术的新里程碑。更多详情及下载链接请参见MSDN官方页面。 ... [详细]
  • 本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条,包括垂直和水平滚动条的控制,以及特定元素的聚焦技术。 ... [详细]
  • 探索PWA H5 Web App优化之路(Service Worker与Lighthouse的应用)
    本文探讨了如何通过Service Worker和Lighthouse工具来优化PWA H5 Web App,旨在提升用户体验,包括提高加载速度、增强离线访问能力等方面。 ... [详细]
  • 本文介绍如何使用Python编写一个简单的爬虫程序,从知乎问题页面抓取美腿图片。环境配置包括Windows 10操作系统,Python语言及其相关库。 ... [详细]
  • 精选10款jQuery内联编辑插件
    本文精选了10款优秀的jQuery内联编辑插件,旨在帮助开发者实现页面内容的动态管理和即时编辑,提升用户体验。 ... [详细]
  • 1.选择一个翻译页面,我选择的是有道词典(http:dict.youdao.com)2.随便输入一个英语单词进行翻译,然后查看源文件,找到 ... [详细]
author-avatar
停留的烟蒂_984
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有