jquery 鼠标滚轮事件

最新推荐文章于 2025-05-03 16:28:55 发布

lijunlinlijunlin

最新推荐文章于 2025-05-03 16:28:55 发布

阅读量948

点赞数

分类专栏： javaScript

javaScript 专栏收录该内容

55 篇文章

订阅专栏

本文深入探讨了鼠标滚轮事件在不同浏览器（如Firefox与IE）之间的区别，介绍了如何通过一行代码解决兼容性问题，并展示了如何利用jQuery MouseWheel插件简化事件处理。文章还提供了插件的下载地址和演示实例，帮助开发者轻松实现鼠标滚轮事件的响应。

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

鼠标滚轮事件 MouseWheel

这个事件在标准下和IE下是有区别的。

firefox是按标准实现的,事件名为"DOMMouseScroll ",IE下采用的则是"mousewheel "。

当然一行代码就解决了兼容问题
var mousewheel = document.all?"mousewheel":"DOMMouseScroll";

事件属性，IE是event.wheelDelta，Firefox是event.detail 属性的方向值也不一样，IE向上滚> 0，Firefox向下滚 > 0。

使用插件 MouseWheel Extension 3.0.2

下载地址 http://plugins.jquery.com/files/jquery.mousewheel.3.0.2.zip

演示地址 http://brandonaaron.net/code/mousewheel/demos

 
    jQuery(
    function
    ($) {
     $(
    '
    div.mousewheel_example
    '
    )
         .bind(
    '
    mousewheel
    '
    , 
    function
    (event, delta) {
             var dir 
    =
     delta 
    >
     
    0
     ? 
    '
    Up
    '
     : 
    '
    Down
    '
    ,
                 vel 
    =
     Math.abs(delta);
             $(this).text(dir 
    +
     
    '
     at a velocity of 
    '
     
    +
     vel);
             
    return
     
    false
    ;
         });
 });
   