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

最新推荐文章于 2024-05-09 10:19:43 发布

樊小书生

最新推荐文章于 2024-05-09 10:19:43 发布

阅读量8.6k

点赞数 1

分类专栏： JavaScript jQuery web开发录文章标签：禁止滚轮事件浏览器兼容性

本文链接：https://blog.csdn.net/fxss5201/article/details/55667563

版权

JavaScript 同时被 3 个专栏收录

86 篇文章 1 订阅

订阅专栏

web开发录

57 篇文章 1 订阅

订阅专栏

jQuery

21 篇文章 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">
<!-- 禁止谷歌浏览器、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却是通过禁止默认行为来禁止（其他浏览器采用禁止默认行为是无效的）。

樊小书生

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
禁止input输入框的鼠标滚轮事件详解

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

扫一扫