IE FireFox 兼容之 window.event

最新推荐文章于 2022-03-18 11:02:51 发布

原创最新推荐文章于 2022-03-18 11:02:51 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #Firefox #JavaScript #HTML #浏览器 #ViewUI

前端技术专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一种兼容IE和Firefox等浏览器的事件处理方法。通过传递event参数并采用不同属性（srcElement/target）来获取触发事件的元素。同时讨论了不同浏览器下event对象属性的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看一段代码：

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function testEvent(){
  var target = window.event.srcElement ;
  document.getElementById('result').innerHTML = target.tagName;
}
</script>
</HEAD>
<BODY>
<div id="result"></div>
<input type="button" value="点我" onclick="javascript:testEvent()"/>
</BODY>
</HTML>

这段代码在IE浏览器下的效果是，点击按钮，页面上显示“input”。但是在FireFox下点击按钮则会报错：window.event is undefined。这是因为在FireFox下window.event只能在事件发生的现场使用，也就是说，event变量必须在方法调用处被传入。再看下面的代码。

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function testEvent(number,ev){
  var target = ev.srcElement || ev.target;
  document.getElementById('result').innerHTML = target.tagName+ number;
}
</script>
</HEAD>

<BODY>
<div id="result"></div>
<input type="button" value="点我" onclick="javascript:testEvent(20,event)"/>
<script type="text/javascript">
//testEvent();
</script>
</BODY>
</HTML>

上面的代码在IE和FireFox下执行都能生效，且效果相同。上面的代码有几处需要注意：

1、传入调用方法的event变量一定要是“event”，其它字符不能代替。但是位置不限。

2、event变量的点击对象获取在IE和firefox下也是不同的。IE下使用 .target获取，FireFoxe则要使用.srcElement获取。

其它兼容性问题

1、IE中 event对象有x,y属性，没有pageX,pageY属性；FireFox中有pageX,pageY属性，没有x,y属性。

2、待续。。。。