监听鼠标滚轮事件

最新推荐文章于 2025-06-09 23:55:24 发布

原创最新推荐文章于 2025-06-09 23:55:24 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web开发 #鼠标

js 同时被 2 个专栏收录

18 篇文章

订阅专栏

web

12 篇文章

订阅专栏

本文介绍了如何在不同浏览器中统一处理鼠标滚轮事件的方法。针对Firefox和其他浏览器的事件差异，文章给出了兼容性的解决方案，并通过一个图片放缩的例子展示了具体实现。

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

鼠标滚轮在web开发中是比较常用的，比如地图的放大缩小，改变select框的值等，今天就这个写一下。
首先，不同的浏览器有不同的滚轮事件。大致分为两种：onmousewheel（除Firefox以外的浏览器支持）和DOMMouseScroll（只有Firefox支持）。在使用滚轮前首先要注册滚轮事件，注册方法也不同，Firefox采用addEventListener监听，其他浏览器直接采用onmousewheel监听，例：

//Firefox
if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
//IE及其他浏览器
window.onmousewheel = document.onmousewheel=scrollFunc;

scrollFunc即为滚轮执行方法。
注册完成后再来说说滚轮返回值，判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。代码如下：

var scrollFunc = function(e){
        e = e || window.event;
        //IE/Opera/Chrome
        if(e.wheelDelta){
            if(parseInt(e.wheelDelta)>0){
                ImageExpand();
            }else{
                ImageReduce();
            }
        }else if(e.detail){//Firefox
            if(parseInt(e.detail)>0){
                ImageReduce();
            }else{
                ImageExpand();
            }
        }
    }

本例是滚轮实现图片放缩！！！