鼠标滚轮事件 mousewheel/DOMMouseScroll

最新推荐文章于 2024-07-16 04:57:09 发布

麦兜_冰夕

最新推荐文章于 2024-07-16 04:57:09 发布

阅读量2.3k

点赞数

分类专栏：浏览器兼容问题 javascript / jQuery 文章标签：鼠标滚轮事件浏览器兼容问题 onmousewheel

本文链接：https://blog.csdn.net/lyn1772671980/article/details/79581835

版权

本文介绍了如何在jQuery中使用MouseWheel插件处理鼠标滚轮事件，包括Firefox和其他浏览器的兼容性问题。详细讲解了Firefox的DOMMouseScroll事件和其它浏览器的onmousewheel事件，以及detail和wheelDelta属性在不同浏览器中的表现。还提到了原生JavaScript实现滚轮事件监听的兼容性方案，提供了一个兼容各浏览器的封装方法。

摘要由CSDN通过智能技术生成

1.Jquery-MouseWheel

　　jquery默认是不支持支持鼠标滚轮事件(mousewheel)

　　jquery MouseWheel下载：https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js

　　然后就可以使用mousewheel和unmousewheel事件函数了

1 $('div.mousewheel_example').mousewheel(fn);    
2 $('div.mousewheel_example').bind('mousewheel', fn);

　　Jquery MouseWheel兼容性

　　FireFox浏览器使用DOMMouseScroll事件,其他（包括IE6）都是使用onmousewheel事件；
　　FireFox：detail（属性）判断方向，返回值是3的整

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

麦兜_冰夕

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS中的鼠标滚轮事件（onmousewheel、判断滚动的wheelDelta、detail，取消浏览器默认行为的preventDefault()方法）

Fantasc的博客

08-11

9213

onmousewheel事件：会在鼠标滚轮滚动的时候被触发，对鼠标滚轮是否滚动进行判断，但是火狐浏览器不支持这个属性。DOMMouseScroll可以为火狐浏览器绑定滚动事件，它需要通过addEventListener函数来绑定。 event.wheelDellta：可以用来获取鼠标的滚动方向，对于得到的值，只看正负，往上滚是正值，往下滚是负值。火狐浏览器不支持这个方法，需要会用event.detail来获取滚轮的滚动方向，向上是负值，向下是正值。在页面有滚动条的时候，滚动条会随着鼠标滚轮滚动..

鼠标滚动事件 - onmousewheel

weixin_30896763的博客

08-18

494

1.Jquery-MouseWheel 　　jquery默认是不支持支持鼠标滚轮事件(mousewheel) 　　jquery MouseWheel下载：https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js 　　然后就可以使用mousewheel和unmousewheel事件函数了 ...

参与评论您还未登录，请先登录后发表或查看评论

java 模拟鼠标滚动

最新发布

weixin_41221548的博客

07-16

Java 模拟鼠标滚动：技术解析与实现在软件开发过程中，有时我们需要模拟鼠标操作，比如滚动页面、选择文本等。Java 提供了多种方式来实现这些功能，其中 java.awt.Robot 类是一个常用的选择。本文将详细介绍如何使用 Java 来模拟鼠标滚动，并提供相应的代码示例。鼠标滚动原理在计算机中，鼠标滚动通常由滚轮...

鼠标滚轮(mousewheel)和DOMMouseScroll事件（转载）

weixin_30536513的博客

06-14

202

转自：http://www.w3cmm.com/javascript/mousewheel-dommousescroll.html IE6.0首先实现了mousewheel事件。此后，Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到d...

OnMouseWheel

06-02

2191

原来OnMouseWheel传进来的参数中的鼠标位置是屏幕坐标系中的位置，这点和其它几个鼠标事件的参数有点不一样。yun!

onmousewheel

weixin_30567225的博客

11-15

111

缩放图片效果复制此段代码看看效果就知道怎么用了 <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel Event Sample－ www.51windows.Net</TITL...

html中鼠标滚轮事件onmousewheel的处理方法

09-01

本文将详细介绍如何使用`onmousewheel`事件处理鼠标滚轮的滚动行为，并探讨不同浏览器之间的兼容性问题。首先，`onmousewheel`事件是HTML元素上的一个事件处理器，用于监听鼠标滚轮的滚动动作。当用户滚动鼠标滚轮...

鼠标滚轮事件兼容性处理【mousewheel 与 DOMMouseScroll】

云簪阁

11-01

331

火狐浏览器使用DOMMouseScroll，其他浏览器都是用mousewheel 火狐有个特殊属性event.detail，表示滚动的值正数：向下滚动，负数：向上滚动其他浏览器，通过event.wheelDelta获取滚动值正数：向上滚动，负数：向下滚动滚动一次值120 兼容性处理示例 window.onload=function(){ //获取dom元素 var ...

javascript实现禁止鼠标滚轮事件

10-23

在JavaScript代码中，还有一个MouseWheel函数，这个函数的作用是阻止鼠标滚轮事件的默认行为。它会检查浏览器是否支持e.stopPropagation方法或e.cancelBubble属性，或者e.preventDefault方法或e.returnValue属性，并...

javascript 兼容鼠标滚轮事件

01-21

firefox是按标准实现的,事件名为”DOMMouseScroll “,IE下采用的则是”mousewheel “。当然一行代码就解决了兼容问题代码如下:var mousewheel = document.all?”mousewheel”:”DOMMouseScroll”; 事件属性，IE是...

jQuery 鼠标滚轮插件 mousewheel

04-27

1.使用方法很简单，仅仅把mousewheel绑定到指定元素上。示例代码如下： // using on $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); // using the event helper $('#my_elem').mousewheel(function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); 2.它提供了两个很有帮助事件mousewheel和unmousewheel来封装了滚轮的事件：使用方法如下： //绑定mousewheel事件 $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); //解除mousewheel事件 $('#my_elem').unmousewheel(fn) 3.阻止事件冒泡，如果只想在某个元素上捕捉事件，而不想冒泡到document上，这样浏览器的滚动条就不会发生滚动了。事件代码如下： //阻止冒泡 $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); return false; }); 4.获取滚动的方向,示例代码如下： if (delta > 0) o += ' up (' + delta + ')'; else if (delta 0) o += ' north (' + event.deltaY + ')'; else if (event.deltaY 0) o += ' east (' + event.deltaX + ')'; else if (event.deltaX < 0) o += ' west (' + event.deltaX + ')'; 5.可以通过event.deltaFactor获取滚动的距离，代码如下： $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaFactor); return false; });

js鼠标滚轮事件(mousewheel/DOMMouseScroll)

zhanming333的博客

07-24

1584

简介：鼠标滚轮事件主要分为FireFox派和其他派。 1、mousewheel与DOMMouseScroll 1、mousewheel IE6首先实现了mousewheel事件。此后，Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向上还是向下），就会触发mousewheel事件。这个事件可以在任何元

mousewheel

weixin_30433075的博客

10-27

/********************************************* * @author sky *********************************************/ function addEvent(el,type,fn,capture){ if(el.addEventListener){ el.addEventLis...

鼠标滚轮事件（mousewheel、DOMMouseScroll）

anzheng6118的博客

05-31

219

1 (function() { 2 function handleMouseWheel(event) { 3 event = EventUtil.getEvent(event); 4 var delta = EventUtil.getWheelDelta(event); 5 console.log(delta)...

鼠标滚轮(mousewheel)和DOMMouseScroll事件

weixin_34392435的博客

06-15

119

发布时间：2011-11-24 作者：来源：w3cmm教程 IE6.0首先实现了mousewheel事件。此后，Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document(IE)或window(Opera、Chrome、...

jquery mousewheel

weixin_30867015的博客

12-30

111

(function($) { var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll']; var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel'...

jQuery监听鼠标上下滚动事件

Kainx

06-13

5202

代码实现 $(document).on("mousewheel DOMMouseScroll", function (event) { var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie (event.originalEvent.detail &&a

mousewheel事件和DOMMouseScroll

07-28

mousewheel事件是在大多数现代浏览器中支持的事件，用于监听鼠标滚轮的滚动。它提供了一个event对象，可以通过该对象的属性来获取滚动的相关信息，例如滚动的方向、滚动的速度等。 DOMMouseScroll事件是在旧版Fire...