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

時間 2019-12-06

標籤禁用 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

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

<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倒是經過禁止默認行爲來禁止（其餘瀏覽器採用禁止默認行爲是無效的）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。