HTML5是如何使用鼠标滚轮事件的

89 阅读 0 评论 59 点赞

我是靠谱客的博主魔幻小蚂蚁，最近开发中收集的这篇文章主要介绍HTML5是如何使用鼠标滚轮事件的，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

你我都知道在HTML5网页中添加鼠标滚轮事件能够更好的让用户与网页进行交互操作。而在HTML5中，鼠标滚轮并不仅仅就只能上下滑动网页，实际上你还可以依靠这个完成更多的功能，比如视野平面的放大与缩小。

大部分浏览器都是支持鼠标滚轮事件的，所以你可以先订阅鼠标滚轮事件的方法，每当事件被触发时，你能获取一个名为 wheelDelta 的属性，它代表刚才鼠标滚轮改变的大小，其中正值表示滚轮往下滑动，负值表示滚轮往上滑动。数值的绝对值越大，滑动范围越大。

但不幸的是依然有一款浏览器是不支持鼠标滚轮事件的。那就是FireFox。Mozilla 已经实现了一个名为"DOMMouseScroll"的事件的处理，它会传递一个名为 event 且附带了名为 detail 属性的事件参数过来，然而，这个 detail 属性不同于 wheelDelta，它只能返回正值，即只能坚持鼠标滚轮向下滚动的值。

你应该特别注意一下，Apple公司在Safari浏览器中也禁用了鼠标滚动控制页面上下滑动，但是此功能依然在webkit引擎中正常使用的，所以你写的代码是不会触发什么问题的。

 
      <!DOCTYPE html> 
     
      < 
      html  
      lang 
      = 
      "en" 
      > 
     
      < 
      head 
      > 
     
      < 
      meta  
      charset 
      = 
      "UTF-8"  
      /> 
     
      < 
      title 
      >HTML5是如何使用鼠标滚轮事件的</ 
      title 
      > 
     
      < 
      style 
      > 
     
      * { 
     
      padding: 0; 
     
      margin: 0; 
     
      } 
     
      body { 
     
      height: 100%; 
     
      font-family: "微软雅黑"; 
     
      margin: 10px; 
     
      color: #333; 
     
      background-color: #fff; 
     
      overflow-x: auto; 
     
      overflow-y: scroll; 
     
      } 
     
      #squirrel { 
     
      display: block; 
     
      width: 20%; 
     
      margin: 2em auto; 
     
      border: 5px solid #ccc; 
     
      border-radius: 5px; 
     
      cursor: n-resize; 
     
      cursor: -webkit-zoom-in; 
     
      cursor: -moz-zoom-in; 
     
      } 
     
      </ 
      style 
      > 
     
      </ 
      head 
      > 
     
      < 
      body 
      > 
     
      < 
      header 
      > 
     
      < 
      h1 
      >HTML5是如何使用鼠标滚轮事件的</ 
      h1 
      > 
     
      </ 
      header 
      > 
     
      < 
      article 
      > < 
      img  
      id 
      = 
      "squirrel"  
      src 
      = 
      "http://kaidianpu-file.stor.sinaapp.com/0f5265fd5fb66c9edce6.jpg"  
      alt 
      = 
      "a squirrel"  
      /> </ 
      article 
      > 
     
      < 
      script 
      > 
     
      window.onload = function() { 
     
      var sq = {}; 
     
      sq.e = document.getElementById("squirrel"); 
     
      if (sq.e.naturalWidth) { 
     
      sq.nw = sq.e.naturalWidth; 
     
      } 
     
      else { 
     
      var i = new Image(); 
     
      i.src = sq.e.src; 
     
      sq.nw = i.width; 
     
      } 
     
      sq.zoom = 30; 
     
      if (sq.e.addEventListener) { 
     
      sq.e.addEventListener("mousewheel", MouseWheelHandler, false); 
     
      sq.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
     
      } 
     
      else sq.e.attachEvent("onmousewheel", MouseWheelHandler); 
     
      function MouseWheelHandler(e) { 
     
      // cross-browser wheel delta 
     
      var e = window.event || e; 
     
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
     
      sq.e.style.width = Math.max(sq.zoom, Math.min(sq.nw, sq.e.width + (sq.zoom * delta))) + "px"; 
     
      return false; 
     
      } 
     
      } 
     
      </ 
      script 
      > 
     
      </ 
      body 
      > 
     
      </ 
      html 
      >