现代浏览器发展的越来越智能,新增了很多的效果,比如说input输入框,当将其type设置为number的时候,在其获得焦点的时候,滚动鼠标的滚轮可以增加其数值,向上滚动,数值增加,向下滚动,数值减小,但在有些情况的时候并不太适合,比如说在表单中,当表单比屏幕高度大的时候,上面的填完填写下面的内容的时候,一般人都是直接滚动鼠标滚轮来滚动液面,但是如果某个number输入框还在焦点的时候,滚动滚轮会使其数值改变,这个一般都是不希望的,所以需要禁止掉滚轮的滚动事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止input输入框的鼠标滚轮事件</title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script>
</head>
<body>
<input type="number" name="mouse1" id="mouse1">
<!-- 禁止谷歌浏览器、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却是通过禁止默认行为来禁止(其他浏览器采用禁止默认行为是无效的)。