javascript 滚轮事件总结

最新推荐文章于 2022-12-23 09:23:24 发布
最新推荐文章于 2022-12-23 09:23:24 发布
阅读量552 收藏
点赞数
文章标签： javascript function callback 浏览器 safari null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuangyu2/article/details/6367539
版权

滚轮事件是一个非常有用的事件，在翻页或放大时，通常都用到它。但它在各浏览器中实现兼容是相对比较困难的，号称最标准的 FF ，用了一个私有实现 DOMMous
javaｓｃｒｉｐｔ滚轮事件总结
滚轮事件是一个非常有用的事件，在翻页或放大时，通常都用到它。但它在各浏览器中实现兼容是相对比较困难的，号称最标准的FF，用了一个私有实现DOMMouseScroll，而使用mousewheel的其他浏览器或多或少有点bug。我们先看各浏览器对它的支持程度吧。

 
 IE
 firefox
 safari
 chrome
 opera
 
window对象
 false
 true
 true
 true
 true
 
文档对象
 true
 true
 true
 true
 true
 
元素节点
 true
 true
 true
 true
 true
 


接着我们看一下，如何在火狐中实现滚轮事件的事件分派：

window.addEventListener("DOMMouseScroll",function(event){
 
  alert(event.type)
 


 

  alert(event.clientY)
 
},false);
 


 

var event = document.createEvent("MouseEvent");
 
//为了证明分派成功，特意将其clientY设为90
 


 

event.initMouseEvent("DOMMouseScroll",true, null, window,0,0,0,0,90,false,false,false,false,0,null);
 
window.dispatchEvent(event)
 


 

<!doctype html>

<html lang="zh-ch">

  <head>

    <meta charset="utf-8" />

    <meta content="IE=8" http-equiv="X-UA-Compatible"/>

    <title>mousewheel的事件分派 by 司徒正美</title>

 

    <ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">

 

      window.onload = function(){

 

        window.addEventListener("DOMMouseScroll",function(event){

          alert(event.type)

          alert(event.clientY)

        },false);

        var event = document.createEvent("MouseEvent");

        //为了证明分派成功，特意将其clientY设为90

        event.initMouseEvent("DOMMouseScroll",true, null, window,0,0,0,0,90,false,false,false,false,0,null);

        window.dispatchEvent(event)

 

      }

 

    </ｓｃｒｉｐｔ>

    <style type="text/css">

 

    </style>

 

  </head>

  <body>

  </body>

</html>

运行代码

我们可以看到虽然其他标准浏览器也支持这个名为DOMMouseScroll的事件发派，但当我们手动滚动鼠标滑轮时，也只有FF有反应，弹出两个alert。对于其他标准浏览器，我们改用mousewheel试试。

window.addEventListener("mousewheel",function(event){
 
  alert(event.type)
 


 

  alert(event.clientX)
 
},false);
 


 

var event = document.createEvent("MouseEvent");
 
//为了证明分派成功，特意将其clientX设为120
 


 

event.initMouseEvent("mousewheel",true, null, window,0,0,0,120,0,false,false,false,false,0,null);
 
window.dispatchEvent(event)
 


<!doctype html>

<html lang="zh-ch">

  <head>

    <meta charset="utf-8" />

    <meta content="IE=8" http-equiv="X-UA-Compatible"/>

    <title>mousewheel的事件分派 by 司徒正美</title>

 

    <ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">

        window.addEventListener("mousewheel",function(event){

          alert(event.type)

          alert(event.clientX)

        },false);

        var event = document.createEvent("MouseEvent");

        //为了证明分派成功，特意将其clientX设为120

        event.initMouseEvent("mousewheel",true, null, window,0,0,0,120,0,false,false,false,false,0,null);

        window.dispatchEvent(event)

 

    </ｓｃｒｉｐｔ>

    <style type="text/css">

 

    </style>

 

  </head>

  <body>

  </body>

</html>

运行代码

这个在FF的以外的标准浏览器见效，FF只能实现事件分派，不能实现手动触发。可以说，如果非原浏览器原生支持的事件类型，addEventListener是一概不理会的。

对于IE就简单得多了，它没有初始化事件的步骤，你也无法设置其属性，因为那是只读的，但可以设置自定义属性。

  window.onload = function(){
 
    document.attachEvent("onmousewheel",function(){
 


 

      var e = window.event;
 
      alert(e)
 


 

      alert(e.type)
 
      alert(e.aa)
 


 

    });
 
  var event = document.createEventObject();
 


 

  event.aa = "司徒正美"
 
 
 


 

  document.fireEvent("onmousewheel",event)
 
}
 


<!doctype html>

<html lang="zh-ch">

  <head>

    <meta charset="utf-8" />

    <meta content="IE=8" http-equiv="X-UA-Compatible"/>

    <title>mousewheel的事件分派 by 司徒正美</title>

 

    <ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">

     window.onload = function(){

        document.attachEvent("onmousewheel",function(){

          var e = window.event;

          alert(e)

          alert(e.type)

          alert(e.aa)

        });

      var event = document.createEventObject();

      event.aa = "司徒正美"

 

      document.fireEvent("onmousewheel",event)

    }

    </ｓｃｒｉｐｔ>

    <style type="text/css">

 

    </style>

 

  </head>

  <body>

  </body>

</html>

运行代码

 

转自:it民工网[http://www.itminggong.com]
原文链接:http://itminggong.com/a/jishuwenzhang/_net/2011/0304/6540.html

 

 

 

 

 

 

说完事件分派，就到事件绑定部分。虽然现在只有 FF 在用 DOMMouseScroll ，但考虑到未来 FF 改用的 mousewheel 的可能，我们还是写个程序来检测其需要的事件类型吧。最后我们还要在回调函
 

说完事件分派，就到事件绑定部分。虽然现在只有FF在用DOMMouseScroll，但考虑到未来FF改用的mousewheel的可能，我们还是写个程序来检测其需要的事件类型吧。最后我们还要在回调函数中修正其滚动属性：

·         IE的属性名为detail，w3c那边为wheelDelta，现在统一为delta。

·         IE等往上滚一圈为120，往下滚一圈为-120。w3c那边往上滚一圈为-3，往下滚一圈为3，但opera9x系列却实现错误，与IE滚动方向一致，不过10后又修复。

·         safari早期版本，wheelDelta会出现浮点数的情况，我们需要自行取整。

var eventSupported = function( eventName,el ) {
 
  el = el || document.createElement("div");
 


 

  eventName = "on" + eventName;
 
  var isSupported = (eventName in el);
 


 

  if (el.setAttribute && !isSupported ) {
 
    el.setAttribute(eventName, "return;");
 


 

    isSupported = typeof el[eventName] === "function";
 
  }
 


 

  el = null;
 
  return isSupported;
 


 

};
 
 
 


 

var addEvent = function(obj,type,callback){
 
  if ( obj.addEventListener ) {
 


 

    obj.addEventListener( type, callback, false );
 
  } else if ( obj.attachEvent ) {
 


 

    obj.attachEvent( "on" + type, callback );
 
  }
 


 

}
 
var type = eventSupported("mousewheel") ? "mousewheel":"DOMMouseScroll";
 


 

//注意IE下window没有滚轮事件
 
var wheel = function(obj,callback){
 


 

  addEvent(obj, type,function(event){
 
    event = event || window.event;
 


 

    var delta = 0;
 
    if (event.wheelDelta) {
 


 

      delta = event.wheelDelta/120;
 
      //opera 9x系列的滚动方向与IE保持一致，10后修正
 


 

      if(window.opera && window.opera.version() < 10)
 
        delta = -delta;
 


 

    } else if (event.detail) {
 
      delta = -event.detail/3;
 


 

    }
 
    //由于事件对象的原有属性是只读，我们只能通过添加一个私有属性delta来解决兼容问题
 


 

    event.delta =  Math.round(delta); //修正safari的浮点 bug
 
    callback.call(obj,event);
 


 

  });
 
}
 


用法：

wheel(document,function(e){
 
  alert(e.delta)
 


 

});
 


<!doctype html>

<html lang="zh-ch">

  <head>

    <meta charset="utf-8" />

    <meta content="IE=8" http-equiv="X-UA-Compatible"/>

    <title>mousewheel的事件绑定 by 司徒正美</title>

 

    <ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">

      window.onload = function(){

          var eventSupported = function( eventName,el ) {

          el = el || document.createElement("div");

          eventName = "on" + eventName;

          var isSupported = (eventName in el);

          if (el.setAttribute && !isSupported ) {

            el.setAttribute(eventName, "return;");

            isSupported = typeof el[eventName] === "function";

          }

          el = null;

          return isSupported;

        };

 

        var addEvent = function(obj,type,callback){

          if ( obj.addEventListener ) {

            obj.addEventListener( type, callback, false );

          } else if ( obj.attachEvent ) {

            obj.attachEvent( "on" + type, callback );

          }

        }

        var type = eventSupported("mousewheel") ? "mousewheel":"DOMMouseScroll";

        //注意IE下window没有滚轮事件

        var wheel = function(obj,callback){

          addEvent(obj, type,function(event){

            event = event || window.event;

            var delta = 0;

            if (event.wheelDelta) {

              delta = event.wheelDelta/120;

              //opera 9x系列的滚动方向与IE保持一致，10后修正

              if(window.opera && window.opera.version() < 10)

                delta = -delta;

            } else if (event.detail) {

              delta = -event.detail/3;

            }

            //由于事件对象的原有属性是只读，我们只能通过添加一个私有属性delta来解决兼容问题

            event.delta =  Math.round(delta); //修正safari的浮点 bug

            callback.call(obj,event);

          });

        }

        var counterDelta = 0;

        wheel(document.getElementById("delta"),function(e){

          counterDelta += e.delta

          this.innerHTML = counterDelta + ": " + ( e.delta < 0 ? '向下滚' : '向上滚' );

        });

      }

    </ｓｃｒｉｐｔ>

    <style type="text/css">

      body {

        padding:20px 100px;

      }

      a{

        color:#FFDEAD;

      }

      #delta {

        padding:10px;

        width: 100px;

        height: 100px;

        background:#4DC2F2;

        color:#FF8C00;

        font-weight:bolder;

      }

    </style>

 

  </head>

  <body>

    <h1><a href="http://www.cnblogs.com/rubylouvre/">mousewheel的事件绑定</a></h1>

    <div id="delta" >

      by 司徒正美

    </div>

 

  </body>

</html>

运行代码

<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ"> if ($ != jQuery) { $ = jQuery.noConflict(); } var isLogined = false; var cb_blogId = 57731; var cb_entryId = 1725462; var cb_blogApp = "rubylouvre"; var cb_blogUserGuid = "2e47a4b1-de3e-de11-9510-001cf0cd104b"; var cb_entryCreatedDate = '2010/5/1 2:28:00';
 

转自:it民工网[http://www.itminggong.com]
原文链接:http://itminggong.com/a/jishuwenzhang/_net/2011/0304/6541.html

shuangyu2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript权威指南（第6版）
09-20
5.8 JavaScript语句小结 第6章 对象 6.1 创建对象 6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章 ...
javaScript：滚动事件以及窗口事件
最新发布
qq_52799985的博客
10-10 864
滚动事件和窗口事件用来实现响应式设计、动态调整页面元素等功能，提升用户体验。在处理这些事件时，需要考虑兼容性以确保在不同浏览器环境下都能正常运行。
JavaScript滚轮事件
weixin_43228946的博客
08-21 2808
现在，我们大概看下代码的具体逻辑。首先我们通过id获取div的对象d,接着给给d设置滚动事件 onmousewheel，接着我们要判断滚动的方向，event.wheelDelta > 0表示向上滚，event.detail < 0也表示向上滚，这里需要注意下event.wheelDelta不支持·火狐浏览器。如果我们在有浏览器中，在div里面进行滚动，浏览器的滚动给条也会跟着滚动，这样体验不太好。为了解决这个问题，我们在代码里返回false,就可以解决这个问题。还有一种情况，使用addEventListen
js两种滚动事件写法
Goaread的博客
12-02 5404
js两种滚动事件写法，一种可判断滚动条滚动方向，一种只判断可视区底部到页面底部的距离，即滚动条底部到可视区底部的距离。
js中鼠标滚轮事件详解
热门推荐
林中明月间丶
08-30 2万+
参考两个他人的博客:https://www.cnblogs.com/ysx215/p/7002338.html https://www.cnblogs.com/syll/p/6233684.html &lt;body style="height:2000px"&gt; &lt;script type="text/javascript"&gt; var scrollFunc = fu...
JS滚轮事件(mousewheel/DOMMouseScroll)了解
weixin_33862188的博客
02-15 219
  已经没有了小学生时代过目不忘的记忆力了，很多自己折腾的东西、接触的东西，短短1年之后就全然不记得了。比方说，完全记不得获取元素与页面距离的方法(getBoundingClientRect)，或者是不记得现代浏览器下触发DOM自定义事件的方法(dispatchEvent). 显然，适当的温习，翻阅以前的东西，或者自己空余时间处理相关的东西还是有必要的。其实，细想，东西记不住是自己自身原因，在折腾...
JavaScript 权威指南（第四版）.pdf
10-12
　5.8 JavaScript语句小结116 　第6章 对象118 　6.1 创建对象120 　6.2 属性的查询和设置123 　6.3 删除属性127 　6.4 检测属性128 　6.5 枚举属性130 　6.6 属性getter和setter132 　6.7 属性的特性134 　6.8 对象...
JavaScript权威指南(第6版)中文版pdf+源代码
12-10
　5.8 JavaScript语句小结116 　第6章 对象118 　6.1 创建对象120 　6.2 属性的查询和设置123 　6.3 删除属性127 　6.4 检测属性128 　6.5 枚举属性130 　6.6 属性getter和setter132 　6.7 属性的特性134 　6.8 对象...
JavaScript权威指南(第6版)(附源码)
01-09
5.8 JavaScript语句小结 第6章 对象 6.1 创建对象 6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章...
JavaScript权威指南(第6版)
02-23
5.8 javascript语句小结 116 第6章 对象 118 6.1 创建对象 120 6.2 属性的查询和设置 123 6.3 删除属性 127 6.4 检测属性 128 6.5 枚举属性 130 6.6 属性getter和setter 132 6.7 属性的特性 134 6.8 对象的三个属性 ...
js中鼠标滚轮事件详解(firefox多浏览器)
12-11
附加事件 其中经我测试，IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件。 代码如下: /*IE注册事件*/ if(document.attachEvent){ document.attachEvent(‘onmousewheel’,scrollFunc); } Firefox使用addEventListener添加滚轮事件 代码如下: /*Firefox注册事件*/ if(document.addEventListener){ document.addEventListener(‘DOMMouseScroll’,scrollFunc,false); } Saf
JavaScript基础——滚动事件、加载事件、三大家族
NGUP_LEE的博客
04-05 3922
文章目录一、滚动事件和加载事件1.1 滚动事件1.2 加载事件二、元素的大小和位置2.1 scroll家族2.2 offset家族2.3 client家族 一、滚动事件和加载事件 1.1 滚动事件 当页面滚动时触发的事件 时间名：scroll 样例，监听整个页面滚动： window.addEventListener('scroll',funtion(){ //执行操作 }) 可以给window或者document添加scroll事件 1.2 加载事件 加载外部资源（如图片、外联CSS和JavaScr
（黑马程序员）JavaScript DOM和BOM第五天学习笔记之事件对象滚动事件和加载事件
LuShanGuoQiLin的博客
08-25 168
（黑马程序员）JavaScript DOM和BOM第五天学习笔记之事件对象滚动事件和加载事件
JavaScript解决浏览器兼容性问题（五）—— 滚轮事件
前端历险记的博客
03-18 1128
JavaScript解决浏览器兼容性问题（五）—— 滚轮事件
JavaScript 事件节流
m0_54829066的博客
12-23 226
如果不使用事件节流，每次滚动都会执行一次函数，如果滚动速度很快，就会导致浏览器的性能下降。使用事件节流，我们可以设定一个时间间隔，在这个时间间隔内只执行一次函数，这样就可以减少对浏览器的调用，提升性能。如果这个函数执行的代码比较复杂，或者事件频繁触发，会导致浏览器的性能下降。事件节流就是通过设定一个时间间隔，在这个时间间隔内只执行一次事件处理函数，从而减少对浏览器的调用，提升性能。JavaScript 事件节流是一种优化技术，用于减少对浏览器的频繁调用，使得网页的性能得到提升。
js的滚轮事件
个人笔记
03-26 3919
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script type="text/javascript"> //滚轮事属于鼠标事件 只是滚轮兼容性不一样 //滚轮事件直接加给文档 document
vue 滚轮事件 debounce
07-11
在 Vue 中，你可以使用 `lodash` 库中的 `debounce` 函数来实现滚轮事件的防抖处理。首先，确保你已经在项目中安装了 `lodash` 库。 然后，在你的 Vue 组件中，可以按照以下步骤使用 `debounce` 函数来处理滚轮事件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值