鼠标滚轮事件(兼容IE、FireFox、Chrome等浏览器)

最新推荐文章于 2022-04-18 08:56:56 发布
最新推荐文章于 2022-04-18 08:56:56 发布
阅读量7.1k 收藏 3
点赞数
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijunlinlijunlin/article/details/40711437
版权
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>鼠标滚轮事件</title>
        <script type="text/javascript">
            // 鼠标滑轮滚动后执行的函数
            // delta > 0 = 向上滚动
            // delta < 0 = 向下滚动
            //Firefox只识别DOMMouseScroll
            var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel";
            function fmousewheelEvent(e, delta) {
                document.getElementById("test").innerHTML += (delta + "");
                alert("aa");
            }
                        
            //判断是否是IE
            if (document.attachEvent) {
                document.attachEvent("on"+mousewheelevt, function(e) {
                    mousewheelEvent(e, e.wheelDelta);
                });

            }


            //FireFox(DOMMouseScroll)、Chrome、Opera、safari
            else if (document.addEventListener) {
                document.addEventListener(mousewheelevt, function(e) {
                    e=e || window.event;
                    if(e.detail){//Firefox
                        mousewheelEvent(e, e.detail*40);
                    }
                    else if(e.wheelDelta){
                        mousewheelEvent(e, e.wheelDelta);
                    }
                }, false);
            }
        </script>
    </head>
    <body>
        <div id="test"></div>
    </body>
</html>
lijunlinlijunlin
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中鼠标滚轮事件详解(firefox多浏览器)
12-11
附加事件 其中经我测试，IE/... } Firefox使用addEventListener添加滚轮事件 代码如下: /*Firefox注册事件*/ if(document.addEventListener){ document.addEventListener(‘DOMMouseScroll’,scrollFunc,false); } Saf
Javascript鼠标滚轮事件兼容写法
个人前端记录
07-17 2021
1.mousewheel事件(兼容opera,chrome,safari,IE) mousewheel事件对应的event对象包含一个wheelDelta属性。用户滚动鼠标滚轮时，wheelDelta的值是正负120的倍数。 值得注意的是，在opera9.5之前的版本，wheelDelta的正负号是颠倒的，这里不做考虑 一般情况下，监听wheelDelta的正负值，就可以确定鼠标滚轮...
鼠标滚轮事件（兼容火狐）
dy799的博客
03-06 688
鼠标滚轮事件改变字体大小 滚轮事件的兼容性差异有些不拘一格，不是以往的 ie8-派 和其他派，而是 firefox 派和其他派，‘杯具’的是firefox 3.5+ 却不支持此事件，不过庆幸 firefox3.5+ 中提供了另外一个等同的事件。 “mousewheel” 事件中的 “event.wheeldelta”属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。 “dommousescroll” 事件中
将火狐浏览器鼠标滚轮滚动速度调到接近edge浏览器的效果
weikwer
07-28 3603
在火狐浏览器地址栏输入 about:config 进入如下页面 点击我已了解此风险 在搜索栏输入： mousewheel 如上图，修改4个参数 general.smoothScroll.mouseWheel.durationMaxMs = 100 general.smoothScroll.mouseWheel.durationMinMs=0 mousewh...
鼠标滚动：mousewheel事件在Firefox采用DOMMouseScroll事件
vercel
04-09 400
mousewheel鼠标滚轮事件响应 第1、事件的名称不同 除了FireFox浏览器的滚轮事件响应使用的是DOMMouseScroll以外，其余浏览器均使用的是onmousewheel（在使用addEventListener()添加监听事件的时候就把“onmousewheel”的“on”去掉，变成“mousewheel”。“onclick”等监听事件也是一样。） document.addEventListener('mousewheel', handlerMou...
鼠标滚轮兼容火狐,
zz_whw的博客
04-24 390
function mouseWheel(e){             // cross-browser wheel delta               var e = window.event || e; // old IE support               var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.de
JSP中用回车监听按钮事件兼容火狐 IE等主流浏览器
01-20
代码如下: [removed] // 兼容FF [removed]=keyListener; function keyListener(e){ e = e ? e : event; if(e.keyCode == 13){ onsubmit(); } } [removed] 您可能感兴趣的文章:利用java监听器实现在线人数统计浅析...
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器
09-25
DOCTYPE 影响 CSS 处理
JS导入导出Excel 兼容IE、Firefox、Chrome等浏览器
05-10
超好用的js操作Excel实现数据导入导出JS包。只需引入JS包即可完成功能开发。压缩包中有Demo，参照编写即可。
兼容firefox的鼠标滚轮事件
weixin_30629653的博客
10-24 327
function addMouseWheel(obj,fn,preventDefault){ //添加绑定 if(window.navigator.userAgent.toLowerCase().indexOf("firefox") != -1){ obj.addEventListener("DOMMouseScroll",fnWheel,false); } else { ...
鼠标滚轮事件（谷歌或火狐）
m0_57774967的博客
04-18 1995
全部代码： 分部说明： 1.首先在body标签里给个div标签，div里打上鼠标滚轮事件，方便之后在浏览器上，当鼠标滚轮滚动时，就可以明显看出页面有在滚动 2.写div样式。直接在head标签里给个style标签（内部样式），然后用元素选择器给div设置样式，宽度（width）为200像素（px），高度（height）为2000像素（px），背景颜色（background-color）为碧绿色（aquamarine） 3.样式设置好后，就可...
vue中引入mousewheel事件及其兼容性处理
热门推荐
github_39532240的博客
12-15 1万+
项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮（mousewheel）事件，方便查看数据；其实现原理与我上一篇博客中的拖动事件类似，利用模拟出来的同一个滚动条来实现，滚动条设置的要点在于：1、滚动条与滚动槽的高度比例 应该等于 内容区（动态变化）和可视区的高度比例；滚动槽与可视区平齐，高度一样，；滚动条的高度则根据内容的高度等比例计算；2、各元素的定位采用绝对定位，其父元素采
各浏览器的鼠标滚轮事件
earthOLtainanwan的博客
07-11 1328
2019-7-11 之前看尚硅谷李立超的JS基础，发现其中的鼠标滚轮时间与现在的有一些出入。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box...
针对不同浏览器的事件绑定以及鼠标滚轮事件
Encorehwang的博客
01-30 2269
前段时间在看《JavaScript高级程序设计》第十三章-事件, 还没看完, 只是看到里面的一些内容觉得在这里做一个记录和总结会比较好. 首先先来讲解一下绑定事件一共有几种方式以及他们的特点和浏览器的兼容性 一. DOM0级事件处理程序 所谓的DOM0级事件处理程序, 就是通过JavaScript指定事件处理程序的传统方式, 就是将一个函数赋值给一个事件处理程序属性, 比方说div.o
兼容谷歌和火狐的滚轮事件
bangxing1210的博客
04-14 242
谷歌向上滚动滚轮是正值，向下是负值，而火狐正好相反 完整测试代码，分别用谷歌和火狐浏览器测试 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &lt...
判断当前浏览器是不是火狐和禁止鼠标滚轮事件
qq_35960760的博客
02-17 990
var firefox = navigator.userAgent.indexOf('Firefox') != -1; alert(firefox)
给浏览器绑定鼠标滚动事件（兼容FireFox）
dazwxrt0338的博客
08-25 325
var bs = new Browser(); if(bs.userBrowser() == 'firefox'){ document.body.addEventListener("DOMMouseScroll", test, false); }else { document.bo...
JS监听鼠标滚轮事件（兼容IE8）
qq_43142990的博客
12-16 1343
一.用法： 调用addScrollListener()，传入要监听的对象 在scrollHandle() 中编写相应处理函数 二.代码： // 为某个对象添加滚动监听事件(传入要监听的对象) function addScrollListener(obj) { if (obj.addEventListener) { // Firefox obj.addEventListener('DOMMouseScroll', wheel, false) } // IE/Chrome/Ope
nginx 判断浏览器版本 firefox edge chrome ie11
最新发布
06-03
其中，firefox/(\d+\.\d+)表示匹配Firefox浏览器，edg/(\d+\.\d+)表示匹配Edge浏览器，chrome/(\d+\.\d+)表示匹配Chrome浏览器，Trident/7.0表示匹配IE11浏览器。如果匹配成功，则进行相应的处理，如返回302跳转到...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值