禁止input输入框的鼠标滚轮事件详解

来源：互联网发布：航旅纵横网络异常编辑：程序博客网时间：2024/05/16 07:14

现代浏览器发展的越来越智能，新增了很多的效果，比如说input输入框，当将其type设置为number的时候，在其获得焦点的时候，滚动鼠标的滚轮可以增加其数值，向上滚动，数值增加，向下滚动，数值减小，但在有些情况的时候并不太适合，比如说在表单中，当表单比屏幕高度大的时候，上面的填完填写下面的内容的时候，一般人都是直接滚动鼠标滚轮来滚动液面，但是如果某个number输入框还在焦点的时候，滚动滚轮会使其数值改变，这个一般都是不希望的，所以需要禁止掉滚轮的滚动事件。

结合前文说到的Firefox判断滚轮事件就比较特殊，所以它的禁止事件也是比较特殊的。经过测试之后，选用如下代码：

<!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浏览器
这里写图片描述
谷歌浏览器

Opera浏览器

360浏览器

从上一文中可以看到，除了Firefox其他浏览器的判断滚轮事件都是通过onmousewheel来判断，但是Firefox比较特殊，而禁止滚轮事件的时候除了Firefox其他浏览器其他直接添加onmousewheel="return false;"就可以了，但是Firefox却是通过禁止默认行为来禁止（其他浏览器采用禁止默认行为是无效的）。

0 0