event对象在FireFox浏览器中的兼容性问题

最新推荐文章于 2018-11-05 08:57:47 发布

halo1416

最新推荐文章于 2018-11-05 08:57:47 发布

阅读量826

点赞数

分类专栏： JavaScript 文章标签： event对象事件源target clientX clientY

本文链接：https://blog.csdn.net/halo1416/article/details/82780011

版权

JavaScript 专栏收录该内容

32 篇文章 4 订阅

订阅专栏

event对象是属于 window 对象，主要用于解决事件源的问题。

event对象常用的属性：

获取事件源：event.target ===>> 一般浏览器中获取事件源（除IE以外）

event.srcElement ===>> IE中获取事件源

获取鼠标坐标：event.clientX ===>> 获取鼠标水平坐标

event.clientY ===>> 获取鼠标垂直坐标

注意：event对象的使用在FireFox浏览器是有兼容性问题的，在FireFox浏览器中必须在事件调用函数的位置将 event 作为参数传入函数中。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1
			{
				width: 300px;
				height: 200px;
				background: red;
				font-size: 30px;
				color: white;
				font-weight: bold;
			}
			
			#mouseICO
			{
				position: absolute;
				left: 0px;
				top: 0px;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<img id="mouseICO" src="img/shubiao.gif"/>
		<input type="button" id="b1" value="按钮" />
		<!--
			1. Event对象？
			事件对象，代表事件发生时的相关信息，事件发生在谁身上，就是所谓的事件源。
			Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
			
			注意：event对象在FireFox浏览器中，必须在事件调用函数的位置作为参数传如函数中。
		-->
		<script type="text/javascript">
			var btn=document.getElementById("b1");
			btn.onclick=function () {
				alert("aaaa");
				alert(event.target);//[object HTMLInputElement]
				console.log(event.target);
			};
			
			document.getElementById("div1").onclick=function () {
				alert("bbbb");
				alert(event.target);//[object HTMLDivElement]
				console.log(event.target);
			};
			
			//鼠标在body任意位置移动，就显现鼠标的位置
			//非FF都可以用+专门为FF定制
			document.body.onmousemove=function (e) {
				e=e || window.event;
				var mx=e.clientX;
				var my=e.clientY;
				document.getElementById("div1").innerHTML=mx+"_"+my;
				//console.log(mx,my);
				//console.log(event.target);
				
				//鼠标跟随效果
				var mouseICO=document.getElementById("mouseICO");
				mouseICO.style.left=mx+"px";
				mouseICO.style.top=my+"px";
			};
		</script>
	</body>
</html>

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

halo1416

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
event对象在FireFox浏览器中的兼容性问题

event对象是属于 window 对象，主要用于解决事件源的问题。event对象常用的属性：获取事件源：event.target ===&gt;&gt; 一般浏览器中获取事件源（除IE以外） event.srcElement ===&gt;&gt; IE中获取事件源获取鼠标坐标：event.clientX ===&gt;&gt;...
复制链接

扫一扫