HTML5中关于wheel事件兼容性处理

最新推荐文章于 2022-03-31 10:43:35 发布
最新推荐文章于 2022-03-31 10:43:35 发布
阅读量329 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/ososchina/blog/349851
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在html5中存在，滚轮滚动事件判断需要使用 wheel的时间，但各大版本浏览器使用的方式差异性却非常大，总体来说，目前wheel事件有3种，分别如下：

onwheel，onmousewheel，DOMMouseScroll

| onwheel支持所有html5浏览器             
|——————————————————————————————————————
| onmousewheel 支持所有非firefox的浏览器  
|——————————————————————————————————————
| DOMMouseScroll支持firefox浏览器


拦截事件的顺序是 onwheel-?->onmousewheel/DOMMouseScroll

“-?->”表示，一旦事件被onwheel拦截，那么onmousewheel将无法捕获到事件，而DOMMouseScroll完全可以。


综上所述，在编程中尽量使用 onwheel来做到兼容

转载于:https://my.oschina.net/ososchina/blog/349851

weixin_34068198
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5是如何使用鼠标滚轮事件的
佛祖来说
07-16 978
你我都知道在HTML5网页中添加鼠标滚轮事件能够更好的让用户与网页进行交互操作。而在HTML5中，鼠标滚轮并不仅仅就只能上下滑动网页，实际上你还可以依靠这个完成更多的功能，比如视野平面的放大与缩小。    大部分浏览器都是支持鼠标滚轮事件的，所以你可以先订阅鼠标滚轮事件的方法，每当事件被触发时，你能获取一个名为 wheelDelta 的属性，它代表刚才鼠标滚轮改变的大小，其中正值
07-事件处理
Felix_49的博客
06-19 204
vue事件处理
html5鼠标讯听,html5鼠标拖动drag与缩放onwheel操作
weixin_42523975的博客
06-04 281
dragstart：源对象开始拖放，开始移动时事件触发drag：源对象拖放过程中，移动被拖拽对象时触发dragend：源对象拖放结束，整个拖放操作结束时触发。过程对象事件：dragenter：源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发dragover：源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发dragleave：源对象离开过程对象的范围，被拖拽对象离开目标对象时触发...
滚轮y坐标html,HTML WheelEvent deltaY用法及代码示例
weixin_29666725的博客
05-31 961
HTML中的WheelEvent.deltaY属性用于在向下滚动网页时返回正的double值，在向上滚动网页时返回负的double值，否则返回零。这是一个只读属性用法:event.deltaY返回值：它返回一个双精度值，该值指示鼠标滚轮的滚动方向。正双精度值表示鼠标向下滚动。负的double值表示鼠标向上滚动。例：DOM WheelEvent deltaY Propertystyle="text-...
html中鼠标滚轮事件onmousewheel的处理方法
09-01
然而，需要注意的是，不同的浏览器对于滚轮事件的处理存在差异，这需要我们在编写代码时进行兼容性处理。 1. **Firefox** 浏览器使用`DOMMouseScroll`事件来处理滚轮滚动，而不是`onmousewheel`。为了支持Firefox，...
用HTML5实现鼠标滚轮事件放大缩小图片的功能
09-28
这并不意味着我们的代码无法在Safari中工作，因为Safari仍然使用webkit引擎处理滚轮事件，所以代码应该能够正常执行。 总结来说，通过HTML5和JavaScript，我们可以轻松实现鼠标滚轮控制图片放大缩小的功能，从而...
HTML5基于SVG实现可拖拽和缩放的世界地图效果源码.zip
11-04
7. 兼容性和优化：虽然现代浏览器对HTML5和SVG的支持已经很好，但还需要考虑老版本浏览器的兼容性。可以借助polyfills或条件注释来提供降级方案。同时，大型SVG图形可能会影响页面性能，因此需要优化如分块加载、懒...
html5支持手机触屏幻灯片代码
04-06
同时，为了确保在非触屏设备上的兼容性，需要使用`mousewheel`或`scroll`事件来模拟滑动行为。 此外，CSS3的过渡（transition）和动画（animation）属性在这个项目中也扮演着重要角色。它们可以平滑地改变幻灯片的...
jQuery+HTML5页面整屏滑动切换特效代码
03-20
7. **优化与兼容性**：考虑到不同浏览器的兼容性，可能需要引入polyfill库来补全某些HTML5特性，如`requestAnimationFrame`用于平滑动画。同时，检查代码在各种设备和浏览器上的表现，确保良好的响应式设计。 通过...
jquery mousewheel.js兼容高版本jq
07-16
鼠标滚动插件，兼容jquery1.8.0以上，可用于轮播图的滚动事件，直接调用mousewheel方法即可
浅谈wheel滚轮事件（兼容触摸板多次触发）
hclle的博客
05-14 4545
wheel 滚轮事件 一、事件说明 当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件 Tips： 使用触摸板触发该事件，由于系统的平滑处理，会触发多次该事件 IE 下无法使用触摸板触发该事件 替换了已被弃用的非标准 mousewheel 和 DOMMousewheel 事件。 二、兼容性 桌面端 浏览器 版本 Chrome 61 Edge 12 Firefox 17 IE 9 Opera 48 Safari 7 移动端 浏览器 版本
html5鼠标滚轮事件mousewheel使用
热门推荐
clh604的专栏
01-31 1万+
html5中增加了一个新的鼠标事件onmousewheel    这个事件使用的时候要注意使用方法，不然就不会起到作用，下面是一个实例 html文件 图片变换 #image-content{ border: 1px solid green; } 你的
h5移动端新增事件
song854601134的博客
03-31 1904
为什么touch事件中要阻止浏览器的默认行为 那肯定是在能支持触屏的设备上运行，比如手机，手机上你滑动的时候他本身就有个默认的滚屏，因此如果你要操作操作你个dom元素，用touchmove事件，这其实也是滑动。原本你的效果是要在dom上滑动然后产生相应的效果，这个时候你肯定不希望手机上的浏览器屏幕滚动，所以你应该把它默认的滚动给禁止了。这样才会有好的用户体验。 touchmove 默认会有滚动效果吗！？？ 移动端,同一页面不同层的划动操作会造成相互影响,需要额外处理 如:页面层和弹出层(如picke
HTML中鼠标滚轮事件onmousewheel处理
放逐的天空
02-09 6386
滚轮事件是不同浏览器会有一点点区别，一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件，其他的浏览器滚轮事件使用mousewheel，下面我来给大家具体介绍。Firefox使用
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
weixin_39771987的博客
06-03 1655
滚轮事件是不同浏览器会有一点点区别，一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件，其他的浏览器滚轮事件使用mousewheel，下面我来给大家具体介绍。Firefox使用DOMMouseScroll，其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息，其...
自定义滚轮效果选择器spinnerwheel的使用总结
weixin_30828379的博客
02-04 189
项目中有使用到像IOS滚轮效果的选择时间或数字的组件：android-spinnerwheel github地址：https://github.com/ai212983/android-spinnerwheel 总结下用法： XML中使用： <antistatic.spinnerwheel.WheelVerticalView 代码中设置： (1)数值型滚轮： //設置滾...
onscroll事件和onwheel事件的区别
weixin_33701294的博客
05-04 2148
为什么80%的码农都做不了架构师？>>> ...
鼠标事件,键盘事件,html事件
qq_45785424的博客
06-03 197
鼠标事件 1.click： 当单击鼠标按钮并在松开时触发 onclick = function() { console.log('单击了鼠标'); }; 2.dblclick： 当双击鼠标按钮时触发。 ondblclick = function() { console.log('双击了鼠标'); }; 3.mousedown：当按下了鼠标还未松开时触发。 onmousedown = function() { console.log('按下鼠标');
html wheel 事件 怎么设置为被动的
最新发布
09-17
可以通过设置 passive 属性为 true 来将 HTML wheel 事件设置为被动的，例如： ``` element.addEventListener('wheel', handler, { passive: true }); ``` 这样可以提高页面的滚动性能，避免阻止默认的滚动行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值