现代浏览器发展的越来越智能，新增了很多的效果，比如说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却是通过禁止默认行为来禁止（其他浏览器采用禁止默认行为是无效的）。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
