标签:滚轮 function 使用 type detail eve 鼠标滚轮事件 事件对象 use
## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = function(ev){ var oEvent = ev || event;//event为IE8和IE8以下浏览器浏览器事件对象可以直接使用; //以上代码可以判断是否传递了事件对象参数,如果传递了则使用传递的事件对象ev,否则使用window.event alert(oEvent.type);//click类型 } 2 事件对象的兼容写法 a.IE8和IE8以下浏览器不能传递参数,只能使用window.event对象。 b.谷歌浏览器既可以传递事件对象参数,也可以使用window.envent对象,十分全面。 c.火狐浏览器只能使用传递的事件对象参数。 因此针对不同浏览器,兼容性写法如下: 事件.事件类型 = function(ev){//事件类型如鼠标点击事件 var oEvent = ev || event; } ## 鼠标滚轮事件 1 非火狐: mousewheel 这里,event.wheelDelta < 0向下滚动 2 火狐:DOMMouseScroll 这里,event.detail > 0 为向下滚动,event.detail < 0 为向上滚动 3.浏览器兼容性写法如下: document.onmousewheel = wheelHander;//非火狐 document.addEventListener(‘DOMMouseScroll‘,wheelHander,false);//火狐 function wheelHander(e){ //事件的兼容性写法 oEvent = e || window.event; if(oEvent.wheelDelta){//非火狐 if(oEvent.wheelDelta > 0){//向上滚动 }else{//向下滚动 } }else if(oEvent.detail){ if(oEvent.detail > 0){//向下滚动 }else{//向上滚动 } } } 3 案例:使用滚轮改变图片的大小 var img = document.getElementsByTagName(‘img‘)[0]; //非火狐实现滚轮效果 document.onmousewheel = wheelHander;//非火狐 //火狐一家使用DOMMouseScroll实现滚轮效果 document.addEventListener(‘DOMMouseScroll‘,wheelHander,false); function wheelHander(e){ oEvent = e || window.event; if(oEvent.wheelDelta){//非火狐 if(oEvent.wheelDelta > 0){//向上滚动 img.height++; }else{//向下滚动 img.height--; } }else if(oEvent.detail){ if(oEvent.detail > 0){//向下滚动 img.height--; }else{//向上滚动 img.height++; } } }
标签:滚轮 function 使用 type detail eve 鼠标滚轮事件 事件对象 use
原文地址:https://www.cnblogs.com/menglong1214/p/9595009.html