禁用input輸入框的鼠標滾輪事件詳解

現代瀏覽器發展的愈來愈智能,新增了不少的效果,好比說input輸入框,當將其type設置爲number的時候,在其得到焦點的時候,滾動鼠標的滾輪能夠增長其數值,向上滾動,數值增長,向下滾動,數值減少,但在有些狀況的時候並不太適合,好比說在表單中,當表單比屏幕高度大的時候,上面的填完填寫下面的內容的時候,通常人都是直接滾動鼠標滾輪來滾動液麪,可是若是某個number輸入框還在焦點的時候,滾動滾輪會使其數值改變,這個通常都是不但願的,因此須要禁止掉滾輪的滾動事件。html

<!DOCTYPE html>jquery

 <html lang="en"> 瀏覽器

<head> app

     <meta charset="UTF-8">spa

     <title>禁止input輸入框的鼠標滾輪事件</title> code

     <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script> htm

</head> 事件

<body> ip

    <input type="number" name="mouse1" id="mouse1"> input

    <!-- 禁止谷歌瀏覽器、Opera瀏覽器以及360瀏覽器等採用谷歌內核的瀏覽器 --> 

    <input type="number" name="mouse2" id="mouse2" onmousewheel="return false;">

    <!-- 禁止Firefox瀏覽器 --> 

    <input type="number" name="mouse3" id="mouse3">

    <script> 

         $("#mouse3")[0].addEventListener('DOMMouseScroll', MouseWheel, false);

        function MouseWheel(event) 

             event = event || window.event; event.preventDefault(); 

         } 

    </script> 

</body> 

</html>

除了Firefox其餘瀏覽器的判斷滾輪事件都是經過onmousewheel來判斷,可是Firefox比較特殊,而禁止滾輪事件的時候除了Firefox其餘瀏覽器其餘直接添加onmousewheel="return false;"就能夠了,可是Firefox倒是經過禁止默認行爲來禁止(其餘瀏覽器採用禁止默認行爲是無效的)。

相關文章
相關標籤/搜索