【js学习笔记-095】----鼠标滚轮事件

鼠标滚轮事件

学习本节时，除Firefox(妈的，firefox终于各色了一把)外所有浏览器都支持“mousewheel”事件，但firefox支持DOMMouseScroll 而DOM3规范草案建议使用名“wheel”替代“mousewheel”

传递“mousewheel”处理程序的事件对象有wheelDeta属性，其指定用户滚动滚轮有多远。远离用户方向一次鼠标滚轮“单击”的wheelDelta值通常是120，而接近用户方向的一次“单击”值是-120. Safari 和chrome中，为了支持使用二维轨迹球的apple鼠标，除了wheelDeta属性外，事件对象不宜 wheelDeltaX和wheelDeltaY。

在Firefox中，可以使用非标准的DOMMouseScroll事件取代mousewheel，使用事件对象的detail属性取代wheelDelta。但是detail属性值的缩放比率和正负符号不同于wheelDelta,detail值乘以-40和wheelDelta值相等。

对于所有这些事件类型来说，其事件对象就像鼠标事件对象：它包括鼠标指针和键盘辅助键状态。

例：定义鼠标滚轮事件处理程序让用户能在视口内移动 内容也能调整视口大小。

<script src=”whenReady.js”></script>

<script src=”Enclose.js”></script>

<script>

whenReady(function(){

   enclose(document.getElementById(“content”),400,200,-200,-300);

});

</script>

 

//enclose 内容

//把内容元素装入到一个指定大小（最小最50X50）的窗体或视口

//可选参数contentX和contentY指定内容相对窗体初始偏移量

//(如果指定，它们必须<=0)

//这个窗体有mousewheel事件处理程序

//它允许用户平移元素和缩放窗体

functionenclose(content,framewidth,frameheight,contentX,contentY){

//这些参数不仅仅是初始值

//它们保存当前状态，能被mousewheel处理程序使用和修改

framewidth = Math.max(framewidth,50);

frameheight = Math.max(frameheight,50);

contentX = Math.min(contentX,0) || 0;

contentY = Math.min(contentY,0) ||０;

//创建frame元素，且设置CSS类名和样式

var frame = document.createElement(“div”);

frame.className = “enclosure”;

frame.style.width = framewidth+”px”;

frame.style.height = frameheight+”px”;

frame.style.overflow = “hidden”; //没有滚动条，不能溢出

frame.style.boxSizing = “border-box”;

frame.style.webkitBoxSizing = “border-box”;

frame.style.MozBoxSizing = “border-box”;

//把frame放入文档中，并把内容移入frame中

content.parentNode.insertBefore(frame,content);

frame.appendChild(content);

//确定元素相对于frame的位置

content.style.position = “relative”;

content.style.left = contentX+”px”;

content.style.top = contentY+”px”;

//针对下面一些特定浏览器进行怪癖处理

var isMacWebkit = (navigator.userAgent.indexOf(“Macintosh”)!==-1&& navigator.userAgent.indexOf(“WebKit”)!==-1);

var isFirefox = (navigator.userAgent.indexOf(“Gecko”)!==-1);

frame.onwheel = wheelHandler; //DOM3标准

frame.onmousewheel = wheelHandler; //大部分浏览器

if(isFirefox) frame.addEventListener(“DOMMouseScroll”,wheelHandler,false);

function wheelHandler(evnet){

     var e =event||window.event;

     var deltaX= e.deltaX*-30 ||   //wheel事件

                       e.wheelDeltaX/4 || //mousewheel事件

                       0;//属性未定义

     var deltaY= e.deltaY*-30 ||   //wheel事件

                        e.wheelDeltaY/4 || //mousewheel事件

                       (e.wheelDeltaY==undefined && e.wheelDelta/4) || //没有2d就用1D

                         e.detail*-10 ||//Firefox的DOMMouseScroll事件

                       0;//属性未定义

//在大多数浏览器中，每次鼠标滚轮单击对应的delta是120，但是，在mac中，鼠标轮似乎对速度更敏感，其delta值通常要大120倍，使apple鼠标至少如此 使用浏览器测试解决这个问题

if(isMacWebkit){

   deltaX/=30;

   deltaY/=30;

}

   如果Firefox未来版本中mousewheel或wheel事件

  if(isFirefox&& e.type!=”DOMMouseScroll”){

      frame.removeEventListener(“DOMMouseScroll”,wheelHandler,false);

}

  var contentbox= content.getBoundingClinetRect();

  varcontentwidth = contentbox.right-contentbox.left;

  var contentheight= contentbox.bottom-contentbox.top;

  if(e.altKey){//按下Alt键，调整frame大小

      if(deltaX){

          framewidth-=deltaX; //新宽度，但不能比内容大

          framewidth = Math.min(framewidth,contentwidth);

          framewidth = Math.max(framewidth,50);

          frame.style.width = framewidth+”px”; //在frame上设置它

}

if(deltaY){

           frameheight-=deltaY;//新宽度，但不能比内容大

           frameheight= Math.min(frameheight,contentheight);

           frameheight= Math.max(frameheight,50);

          frame.style. height= frameheight+”px”; //在frame上设置它

}

}else {

      if(deltaX){

           varminoffset-=Math.min(framewidth-contentwidht,0);

          contentX = Math.max(contentX+deltaX,minoffset);

          contentX = Math.min(contentX,0);

           content.sytle.left= contentX+”px”;

}

if(deltaY){

           varminoffset-=Math.min(frameheight-contentheight,0);

          contentY = Math.max(contentY +deltaY,minoffset);

           contentY= Math.min(contentY,0);

           content.sytle.top= contentY+”px”;

}

 

}

if(e.preventDefault)e.preventDefault();

if(e.stopPropagation)e.stopPropation();

e.cancelBubble =true;

e.returnValue = false;

return false;

}

}