javascript實現(xiàn)禁止鼠標滾輪事件
平時我們兼容什么東西總是在調(diào)整低版本IE的兼容性,但是這回不是因為低版本瀏覽器不給力。而是因為火狐給力過頭了,完全不顧其它瀏覽器的感受標新立異了。除了火狐之外,所有的瀏覽器都可以使用MouseWheel事件來處理鼠標滾輪的響應。但是火狐卻偏偏不支持MouseWheel,而使用無厘頭的DOMMouseScroll,這玩意兒除了火狐以外其它瀏覽器都不兼容。也就是說,對于鼠標滾輪事件的處理,火狐只能使用DOMMouseScroll。而非火狐則只能使用MouseWheel。這兩種事件實現(xiàn)的原理不同,他們處理的數(shù)據(jù)也不同。
var firefox = navigator.userAgent.indexOf('Firefox') != -1; firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : (img.onmousewheel = MouseWheel); function MouseWheel(e) { e = e || window.event; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; }
我們來看個完整的代碼
<!DOCTYPE html> <style> span {font:14px/20px 微軟雅黑;} #counter { width:50px;height:20px; border:1px solid #CCC; background:#F9F9F9; font:14px/20px Consolas; text-align:center; margin:10px; } </style> <span>使用鼠標滾輪調(diào)整數(shù)值大小</span><br/> <div id="counter">0</div> <script> //判斷瀏覽器 var isIE=navigator.userAgent.match(/MSIE (\d)/i); isIE=isIE?isIE[1]:undefined; var isFF=/FireFox/i.test(navigator.userAgent); //獲取元素 var counter=document.getElementById("counter"); //鼠標滾輪事件 if(isIE<9) //傳統(tǒng)瀏覽器使用MouseWheel事件 counter.attachEvent("onmousewheel",function(){ //計算鼠標滾輪滾動的距離 //一格3行,每行40像素,所以除以120 var v=event.wheelDelta/120; counter.innerHTML=counter.innerHTML*1+v; //阻止瀏覽器默認方法 return false; }); else if(!isFF) //除火狐外的現(xiàn)代瀏覽器也使用MouseWheel事件 counter.addEventListener("mousewheel",function(e){ //計算鼠標滾輪滾動的距離 var v=e.wheelDelta/120; counter.innerHTML=counter.innerHTML*1+v; //阻止瀏覽器默認方法 e.preventDefault(); },false); else //奇葩的火狐使用DOMMouseScroll事件 counter.addEventListener("DOMMouseScroll",function(e){ //計算鼠標滾輪滾動的距離 //一格是3行,但是要注意,這里和像素不同的是它是負值 var v=-e.detail/3; counter.innerHTML=counter.innerHTML*1+v; //阻止瀏覽器默認方法 e.preventDefault(); },false); </script>
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- JS實現(xiàn)禁止高頻率連續(xù)點擊的方法【基于ES6語法】
- js禁止瀏覽器的回退事件
- js控制文本框禁止輸入特殊字符詳解
- JS實現(xiàn)禁止鼠標右鍵的功能
- JS禁止查看網(wǎng)頁源代碼的實現(xiàn)方法
- JavaScript禁止用戶多次提交的兩種方法
- javascript禁止超鏈接跳轉(zhuǎn)的方法
- JavaScript如何禁止Backspace鍵
- JavaScript代碼實現(xiàn)禁止右鍵、禁選擇、禁粘貼、禁shift、禁ctrl、禁alt
- 深入探討JavaScript、JQuery屏蔽網(wǎng)頁鼠標右鍵菜單及禁止選擇復制
- JS實現(xiàn)禁止用戶使用Ctrl+鼠標滾輪縮放網(wǎng)頁的方法
相關文章
Javascript和HTML5利用canvas構建Web五子棋游戲?qū)崿F(xiàn)算法
這只是一個簡單的JAVAscript和HTML5小程序,沒有實現(xiàn)人機對戰(zhàn),五子棋棋盤落子點對應的二維數(shù)組,具體的實現(xiàn)算法如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07javascript中的return和閉包函數(shù)淺析
這篇文章主要介紹了javascript中的return和閉包函數(shù)淺析,至少可以讓你搞懂那么多()是什么意思,需要的朋友可以參考下2014-06-06javascript 處理HTML元素必須避免使用的一種方法
我們在編寫前臺頁面的時候,可能經(jīng)常會用到“javascript+數(shù)據(jù)”生成頁面元素的方法,但當我們要處理的數(shù)據(jù)量較大,導致頁面需要展現(xiàn)過多的控件的時候,頁面的響應速度也會直線下降2009-07-07基于JavaScript實現(xiàn)購物網(wǎng)站商品放大鏡效果
大家在日常生活中都有網(wǎng)購的經(jīng)驗,有的網(wǎng)站會有商品放大鏡功能,效果非常棒,那么基于js代碼是如何實現(xiàn)的呢?下面小編給大家?guī)砹嘶趈s實現(xiàn)購物網(wǎng)站商品放大鏡效果,非常不錯,感興趣的朋友參考下吧2016-09-09獲取URL地址中的文件名和參數(shù)的javascript代碼
JS 獲取URL地址中的文件名和參數(shù),這個版本中有詳細的注釋。2009-09-09在Chrome DevTools中調(diào)試JavaScript的實現(xiàn)
這篇文章主要介紹了在Chrome DevTools中調(diào)試JavaScript的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04