禁用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倒是经过禁止默认行为来禁止（其余浏览器采用禁止默认行为是无效的）。