現代瀏覽器發展的愈來愈智能,新增了不少的效果,好比說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倒是經過禁止默認行爲來禁止(其餘瀏覽器採用禁止默認行爲是無效的)。