兼容各浏览器的鼠标滚动事件写法

最新推荐文章于 2021-11-10 14:12:01 发布
转载 最新推荐文章于 2021-11-10 14:12:01 发布 · 113 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000006013647

本文介绍了在不同浏览器中实现鼠标滚轮事件监听的兼容性方案。通过条件判断选择使用wheel、mousewheel或DOMMouseScroll事件，确保了跨浏览器的一致性体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"

            document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
            
            "DOMMouseScroll" // let's assume that remaining browsers are older Firefox
ie浏览器样式兼容写法_浏览器兼容性以及写法
weixin_33771816的博客
12-29 1072
浏览器的兼容性以及写法第一个 清除浮动的兼容性第二个 透明度的兼容写法第三个 js获取节点的兼容写法第四个 获取计算机计算的所有属性第五个获取元素子节点childNodes 这个属性有兼容性第六个 动态创建节点，元素没有子节点，Ie低版本会读取不到，而标准浏览器会。第七个 获取浏览器可见区的高度 宽度 body第八个 解决Css3中的兼容性第九个 Event的兼容性第十个 事件绑定的兼容性写法第十...
Javascript鼠标滚轮事件兼容写法
个人前端记录
07-17 2101
1.mousewheel事件(兼容opera,chrome,safari,IE) mousewheel事件对应的event对象包含一个wheelDelta属性。用户滚动鼠标滚轮时，wheelDelta的值是正负120的倍数。 值得注意的是，在opera9.5之前的版本，wheelDelta的正负号是颠倒的，这里不做考虑 一般情况下，监听wheelDelta的正负值，就可以确定鼠标滚轮...
兼容各浏览器获取鼠标滚轮上下滚动事件
xiebiaoling的专栏
10-13 2608
// 滑轮滚动事件 if (document.addEventListener) { document.addEventListener('DOMMouseScroll', pageTurn, false); } window.onmousewheel = document.onmousewheel = pageTurn;
鼠标滚轮事件(兼容IE、FireFox、Chrome等浏览器)
lijunlinlijunlin的专栏
11-02 7303
鼠标滚轮事件                      // 鼠标滑轮滚动后执行的函数             // delta > 0 = 向上滚动             // delta             //Firefox只识别DOMMouseScroll             var mousewheelevt=(/Firefox/i.test(navigator.
针对不同浏览器的事件绑定以及鼠标滚轮事件
Encorehwang的博客
01-30 2356
前段时间在看《JavaScript高级程序设计》第十三章-事件, 还没看完, 只是看到里面的一些内容觉得在这里做一个记录和总结会比较好. 首先先来讲解一下绑定事件一共有几种方式以及他们的特点和浏览器的兼容性 一. DOM0级事件处理程序 所谓的DOM0级事件处理程序, 就是通过JavaScript指定事件处理程序的传统方式, 就是将一个函数赋值给一个事件处理程序属性, 比方说div.o
各浏览器的鼠标滚轮事件
earthOLtainanwan的博客
07-11 1486
2019-7-11 之前看尚硅谷李立超的JS基础，发现其中的鼠标滚轮时间与现在的有一些出入。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box...
监听和移除鼠标滚动兼容写法
wzp20092009的博客
11-10 881
// creates a global "addWheelListener" method // example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } ); (function(window, document) { var prefix = ''; var _addEventListener; var _removeEventListener; // v
鼠标滚轮事件（浏览器兼容性写法）
weixin_30888707的博客
07-19 179
1.这种写法，看得好蒙圈，之后再仔细阅读。 //鼠标的滚动事件 兼容各主流浏览器 /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; ...
浏览器的兼容以及写法
weixin_52309490的博客
06-17 306
浏览器的兼容性以及写法 第一个 清除浮动的兼容性 第二个 透明度的兼容写法 第三个 js获取节点的兼容写法 第四个 获取计算机计算的所有属性 第五个 获取元素子节点childNodes 这个属性有兼容性 第六个 动态创建节点，元素没有子节点，Ie低版本会读取不到，而标准浏览器会。 第七个 获取浏览器可见区的高度 宽度 body 第八个 解决Css3中的兼容性 第九个 Event的兼容性 第十个 事件绑定的兼容性写法 第十一个 Mouseevent有兼容性 第十二个 Event对象的兼容性 第十三个 事件源（
谈谈JavaScript中浏览器兼容问题的写法小议
10-20
为了兼容所有浏览器，我们需要先确保事件对象的存在，然后才能访问其属性： ```javascript box.onclick = function(event) { event = event || window.event; console.log("offsetX:" + event.offsetX + " ...
事件高级用法及兼容写法
07-08
### 事件高级用法及兼容写法 #### 一、事件基础 1. **事件函数** ```javascript obj.on-事件名 = fn; ``` 定义事件时，事件函数并不会立即执行，只有当触发相应事件时才会执行。 2. **事件对象** 当...
js 获取屏幕各种宽高的方法(浏览器兼容)
10-27
JavaScript为此提供了丰富的接口，但不同的浏览器对这些接口的支持度有所差异，这就要求开发者编写兼容多种浏览器的代码。 首先，获取屏幕分辨率相关的宽高属性主要有： - `window.screen.height`：获取屏幕分辨率...
js事件源window.event.srcElement兼容性写法(详解)
10-21
在JavaScript中，当用户与页面进行交互（如点击、滚动、鼠标移动等）时，浏览器会触发一个事件，而这个事件最初是由一个元素上产生的。这个最初产生事件的元素，就被称为事件源。了解事件源可以帮助我们确定用户的...
jfoenix-1.8.0.jar中文文档.zip
最新发布
08-09
1、压缩文件中包含： 中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
elasticsearch-6.6.2.jar中文文档.zip
08-09
1、压缩文件中包含： 中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
基于Qt C++开发的仿WPS界面的PDF阅读器，支持PDF预览编辑、OFD格式阅读及多种功能定制，跨平台操作且界面精美，工具栏可定制调整。 · 跨平台开发
08-09
使用Qt C++开发的一款多平台PDF阅读器，重点描述了其主要功能和技术难点。该阅读器不仅支持常见的PDF预览、缩放、目录导航等功能，还特别实现了对OFD格式的支持以及仿WPS样式的界面设计。文中深入探讨了几个关键的技术细节，如PDF解析、文本选择、目录解析、皮肤系统的实现方法及其遇到的问题和解决方案。此外，作者分享了一些开发过程中遇到的具体问题，如坐标系转换、文本乱序存储、跨平台适配等，并提供了相应的解决思路。 适合人群：具有一定Qt C++开发经验的软件工程师，尤其是对PDF阅读器开发感兴趣的开发者。 使用场景及目标：适用于希望深入了解PDF阅读器内部机制及其实现细节的研发人员，旨在帮助他们掌握相关技术和解决问题的方法。 其他说明：文中提到的部分代码片段展示了具体的功能实现，为读者提供了宝贵的参考资料。同时，作者也表达了对未来进一步优化和完善该项目的想法，如支持更多格式和改进现有功能。
基于S7-200Smart PLC的恒压供水系统及485通讯技术实践 v2.5
08-09
使用西门子S7-200Smart PLC构建恒压供水系统的具体方法和技术细节。主要内容包括：PID闭环控制实现稳定水压调节；三台水泵循环启停逻辑设计避免水锤效应；RS485通信接口配置实现与上位机的数据交互。文中不仅提供了完整的程序代码示例，还分享了许多来自实际项目中的宝贵经验和常见错误预防措施，如模拟量信号滤波、正确设置通信参数等。 适合人群：从事自动化控制系统开发的技术人员，特别是对PLC编程和工业网络通信感兴趣的工程师。 使用场景及目标：帮助读者掌握利用S7-200Smart PLC搭建高效稳定的恒压供水解决方案的方法；理解并能够实施PID控制算法优化供水效率；学会配置RS485通信完成远程监控和数据采集任务。 其他说明：作者强调了工程实践中的一些重要注意事项，如确保硬件连接的安全性和可靠性，以及软件层面的有效防护机制。同时提醒开发者关注基本功能的完善而非追求复杂的功能堆砌。
JavaScript事件高级技巧与兼容性处理
2. **事件对象**：当事件发生时，浏览器会创建一个事件对象，包含有关事件的所有信息，如鼠标的坐标、事件类型等。常见的属性有`clientX`和`clientY`（相对于浏览器窗口的坐标）、`pageX`和`pageY`（相对于整个文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值