【JS兼容性问题】鼠标滚轮事件的兼容性写法

最新推荐文章于 2022-03-18 21:32:20 发布

Red sun

最新推荐文章于 2022-03-18 21:32:20 发布

阅读量523

点赞数

分类专栏： JavaScript 文章标签： JavaScript JS兼容性问题鼠标滚轮事件 onmousewheel() JS经验

本文链接：https://blog.csdn.net/qq_36652405/article/details/87793657

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

【JS兼容性问题】鼠标滚轮事件的兼容性写法

我们给一个元素绑定鼠标滚轮事件时不同的浏览器可能实现不了绑定鼠标滚轮事件的方法，绑定的方法也很多，如：

用onmousewheel()：DOM0级事件绑定，给元素绑定鼠标滚轮事件。

用 addEventListener("DOMMouseScroll",function(){})：DOM2级事件绑定，给元素绑定鼠标滚轮事件。

不知道DOM0和DOM2的小伙伴请点击下方传送门了解。

https://blog.csdn.net/qq_36652405/article/details/87719373

首先来介绍onmousewheel()；以下我给test这个div绑定了鼠标滚轮事件。

<body>
		<div id="test">
			test
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var testNode = document.querySelector("#test");
			//DOM0 绑定形式
			testNode.onmousewheel = function() {
				console.log("鼠标滚轮正在滚");
			}
		}
	</script>

开始测试onmousewheel() 在各大主流浏览器中是否支持：

IE：支持。

谷歌浏览器：支持。

火狐浏览器：不支持。

一片空白，控制台没有输出。

结论：火狐浏览器并不支持onmousewheel() 方法。

既然火狐浏览器并不支持onmousewheel()；那么我们如果要在火狐浏览器中兼容鼠标滚轮事件，

那么就得用到addEventListener("DOMMouseScroll",function(){});

下面是兼容性写法，话不多说上代码：

<body>
		<div id="test">
			test
		</div>
	</body>

	<script type="text/javascript">
		window.onload = function() {
			var testNode = document.querySelector("#test");
			//火狐浏览器，DOM2级事件绑定形式
			if(testNode.addEventListener) {
				testNode.addEventListener("DOMMouseScroll", function() {
					console.log("鼠标滚轮正在滚2");
				})
			}
			//非火狐浏览器，DOM0 级事件绑定形式
			testNode.onmousewheel = function() {
				console.log("鼠标滚轮正在滚1");
			}
		}
	</script>

这样的兼容性写法不管是在火狐浏览器还是非火狐浏览器中，都能正常绑定鼠标滚轮事件。

如果我的文章可以帮到你的话，那我深感荣幸。