JavaScript解决浏览器兼容性问题（一）—— 事件对象event

学习越学越多

已于 2022-03-20 13:06:47 修改

阅读量271

点赞数

分类专栏：处理浏览器兼容性问题文章标签：前端 javascript

于 2022-03-17 18:01:38 首次发布

本文链接：https://blog.csdn.net/weixin_54972104/article/details/123555577

版权

处理浏览器兼容性问题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了在创建事件响应函数时遇到的一个兼容性问题，即在现代浏览器中正常运行的代码在IE8及以下版本的浏览器中失效。问题在于IE8不直接传递事件对象到事件处理函数。解决方法是在函数内部通过`event=event||window.event`来确保在IE8中也能获取到事件对象。示例代码展示了如何实现实时显示鼠标坐标的跨浏览器功能。

摘要由CSDN通过智能技术生成

问题描述

在创建事件的响应函数时（比如：鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向），

调用如 XXX.onclick = function(event){

。。。。。。

} 这样的函数时，在现代浏览器内都可正常执行，但在ie8及以下的浏览器内却失效。

实例

名称

实时显示鼠标坐标

功能简介

如下图，当鼠标在上面的框里时，下面的框中显示当前鼠标坐标

源代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#areaDiv {
			border: 1px solid black;
			width: 300px;
			height: 50px;
			margin-bottom: 10px;
		}

		#showMsg {
			border: 1px solid black;
			width: 300px;
			height: 20px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {

			var areaDiv = document.getElementById("areaDiv");
			var showMsg = document.getElementById("showMsg");

			areaDiv.onmousemove = function (event) {

				//此处是解决方法
				event = event || window.event;

				var x = event.clientX;
				var y = event.clientY;

				showMsg.innerHTML = "x = " + x + " , y = " + y;
			};
		};
	</script>
</head>

<body>
	<div id="areaDiv"></div>
	<div id="showMsg"></div>
</body>

</html>