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

谁践踏了优雅 2022-07-12 08:15 693阅读 0赞

现代浏览器发展的越来越智能，新增了很多的效果，比如说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">
    
    <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浏览器  
![这里写图片描述][SouthEast]  
谷歌浏览器  
![这里写图片描述][SouthEast 1]  
Opera浏览器  
![这里写图片描述][SouthEast 2]  
360浏览器  
![这里写图片描述][SouthEast 3]

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

[SouthEast]: /images/20220710/516763423680415fa8cf618f3d0c2163.png
[SouthEast 1]: /images/20220710/708d61264a054b49b6a8c9b96271c3b1.png
[SouthEast 2]: /images/20220710/810eef6ba355447e995f7244f14a4a03.png
[SouthEast 3]: /images/20220710/f3199a62193545adb0d1494310b8a64f.png