歡迎使用CSDN-markdown編輯器

2024-04-27 15:14:10

字體：大中小

供稿：網(wǎng)友

之前學(xué)習(xí)了onmouSEOver，onmousedown等鼠標(biāo)事件，今天來看看鼠標(biāo)的滾輪事件，瀏覽器兼容一直是讓人比較惡心的事情，今天就讓我們將惡心進(jìn)行到底，看看這個(gè)惡心的鼠標(biāo)滾輪事件！

鼠標(biāo)滾輪事件在IE和谷歌瀏覽器Chrome下是通過onmousewheel這個(gè)事件實(shí)現(xiàn)的，但是火狐FF下卻不識(shí)別onmousewheel，在FF下需要用DOMMouseScroll，并且必須用“事件監(jiān)聽”方式添加事件才有效；

而大家都知道“事件監(jiān)聽”方式綁定事件：

IE下是通過attachEvent實(shí)現(xiàn)事件監(jiān)聽

而Chrome和FF下通過addEventListener 來實(shí)現(xiàn)事件監(jiān)聽

這個(gè)場(chǎng)面是夠惡心了：

事件監(jiān)聽滾輪事件

谷歌 addEventListener onmousewheel

IE attachEvent onmousewheel

FF addEventListener DOMMouseScroll

為了瀏覽器兼容，我們自己封裝一個(gè)“綁定事件的函數(shù)”

有時(shí)候當(dāng)鼠標(biāo)滾輪滾動(dòng)的時(shí)候我們需要知道滾輪是向上滾的還是向下滾的。

在IE和Chrome下通過event.wheelDelta的返回值可以知道滾輪是向上滾的還是向下滾的

當(dāng)返回值為正值的時(shí)候，說明是向上滾

當(dāng)返回值是負(fù)值的時(shí)候，說明是向下滾

但是event.wheelDelta在火狐下并不起作用，在火狐下需要通過event.detail來知道滾輪是向上滾的還是向下滾，火狐下還有一點(diǎn)不同：

當(dāng)返回值為正值的時(shí)候，說明是向下滾

當(dāng)返回值是負(fù)值的時(shí)候，說明是向上滾

接下來，實(shí)現(xiàn)當(dāng)滾輪向下滾動(dòng)時(shí)div的高度增大，向上滾時(shí)div高度減小

需要定義一個(gè)標(biāo)志位，標(biāo)志滾輪是向上滾還是向下滾

需要做瀏覽器兼容

還要阻止瀏覽器默認(rèn)行為

window.onload = function () { var oDiv = document.getElementById('div1'); function onMouseWheel(ev) {/*當(dāng)鼠標(biāo)滾輪事件發(fā)生時(shí)，執(zhí)行一些操作*/ var ev = ev || window.event; var down = true; // 定義一個(gè)標(biāo)志，當(dāng)滾輪向下滾時(shí)，執(zhí)行一些操作 down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0; if(down){ oDiv.style.height = oDiv.offsetHeight+10+'px'; }else{ oDiv.style.height = oDiv.offsetHeight-10+'px'; } if(ev.PReventDefault){/*FF 和 Chrome*/ ev.preventDefault();// 阻止默認(rèn)事件 } return false; } addEvent(oDiv,'mousewheel',onMouseWheel); addEvent(oDiv,'DOMMouseScroll',onMouseWheel); } function addEvent(obj,xEvent,fn) { if(obj.attachEvent){ obj.attachEvent('on'+xEvent,fn); }else{ obj.addEventListener(xEvent,fn,false); } }

上一篇：文字排版之font的使用

下一篇：Day_8.