javascript兼容低版本IE浏览器的事件对象

快乐打工仔 分类:实例代码

在事件处理中,事件对象存在一定的兼容性问题,下面就通过代码实例做一下简单介绍。

先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css"> 
#box{
  width:200px;
  height:200px;
  background-color:green;
}
</style> 
<script type="text/javascript">
window.onload=function() {
  var obox = document.getElementById("box");
  obox.onclick=function(){
    this.innerHTML=window.event.clientX;
  }
}
</script> 
</head> 
<body> 
<div id="box"></div>
</body> 
</html>

上面的代码能够在IE10和IE10以下浏览器正确运行,在谷歌浏览器下也是可以的,但是在火狐浏览器下无法正确运行,因为它不支持window.event作为事件对象。代码修改如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css"> 
#box{
  width:200px;
  height:200px;
  background-color:green;
}
</style> 
<script type="text/javascript">
window.onload=function() {
  var obox = document.getElementById("box");
  obox.onclick=function(ev){
    var ev=ev||window.event;
    this.innerHTML=ev.clientX;
  }
}
</script> 
</head> 
<body> 
<div id="box"></div>
</body> 
</html>

上面的这种方式就可以兼容所有浏览器了。

事件对象标准的使用方式是需要通过事件处理函数进行传递,这种方式标准浏览器都支持,IE8和IE8以下浏览器不支持。

所以要做一下兼容处理:

var ev=ev||window.event

回复

我来回复
  • 暂无回复内容