滚轮事件兼容

onmousewheel事件

功能：滚轮事件兼容

UForm框架中鼠标滚轮事件onmousewheel的处理方法:

在浏览器中因为chrome和friefox不支持onmousewheel,给浏览器的全局HTMLElement设置滚轮事件,让页面上所有的元素使用onmousewheel事件时兼容DomMouseScroll事件和onwheel事件

html:
<label for="wheelDelta"> 滚动值:</label>(IE/Chrome):
<input type="text" id="wheelDelta" style="background:#ebebeb;border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"/>
<label for="detail"> 滚动值:(Firefox)</label>:
<input type="text" id="detail" style="background:#ebebeb;border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"/>

js:
  var scrollFunc = function (e) {
      var direct = 0;
      ee = e || window.event;
      var t1 = document.getElementById("wheelDelta");
      var t2 = document.getElementById("detail");
      if (e.wheelDelta) {//IE/Opera/Chrome  
          t1.value = e.wheelDelta;
      } else if (e.detail) {//Firefox  
          t2.value = e.detail;
      }
      if (e.detail) {
          ScrollText(direct);
      }
  } 
  /*注册事件*/
  if (document.addEventListener) { 
    document.addEventListener('DOMMouseScroll', scrollFunc, false); 
  }//W3C  
  window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari 

 滚动值:(IE/Chrome):
 滚动值:(Firefox):

滚轮事件兼容:
html:
<label for="ie"> 滚动值:</label>(IE/Chrome):
<input type="text" id="Text1" style="background:#ebebeb;border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"/>
<label for="firefox"> 滚动值:(Firefox)</label>:
<input type="text" id="Text2" style="background:#ebebeb;border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"/>
js:
window.onmousewheel = function (e) {
        var direct = 0;
        ee = e || window.event;
        var _t1 = $("#ie")[0];
        var _t2 = $("#firefox")[0];
        if (e.wheelDelta) {//IE/Opera/Chrome  
            _t1.value = e.wheelDelta;
        } else if (e.detail) {//Firefox  
            _t2.value = e.detail;
        }
        if (e.detail) {
            ScrollText(direct);
        }
    }

 滚动值:(IE/Chrome):
 滚动值:(Firefox):

代码执行的作用是：
让浏览器兼容轮滚事件，
判断滚轮向上或向下,现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail,其余四类使用wheelDelta;
两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下

尝试一下：

返回结果

 
作者：廖泽愈 
信息录入:廖泽愈