JavaScript 事件处理在 IE 与 Firefox 中的传参兼容方案

事件对象兼容性与传参挑战

event对象在IE和Firefox浏览器中存在兼容差异，今日在处理参数传递时遇到一些挑战，参考了网上的多种方法后，总结出了以下心得：

aClassArray[i].onmouseover = function () { //代码直接写在里面是可以的，要传参也可以传，只是不方便复用 };

aClassArray[i].onmouseover =linkMouseover//不传参的情况下是可以用的，但后续不能用 arguments.callee.caller.arguments[0]

aClassArray[i].onmouseover =linkMouseover()//加括号是错误用法

aClassArray[i].onmouseover = function () { linkMouseover(this) };//this能传进去，可以alert出来，但evt.clientX + "px"就出问题了，是空的。。。 arguments.callee.caller.arguments[0]//可以用这个解决

var src = evt.srcElement || evt.target; //后续还可以跟src

===========================================================================

完整示例代码

以下是相关的练习代码示例。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="external nofollow" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<style type="text/css">
.aClass, .aClass:visited {
font-size: 36px;
text-decoration: none;
color: #0094ff;
}


.divTips {
font-size: 20px;
color: red;
border: #f00 1px solid;
position: absolute;
width: 100px;
height: 30px;
}
</style>
<script type="text/javascript">
function initOnOver() {
var titleTips = {
"baidu": "百度网站提示",
"163": "163网站提示",
"google": "google网站提示"
}
var aTag = document.getElementsByTagName("a");
var aClassArray = [];
for (var i = 0; i < aTag.length; i++) {
if (aTag[i].className == "aClass") {
aClassArray[aClassArray.length] = aTag[i];
}
}
for (var i = 0; i < aClassArray.length; i++) {
var e;
aClassArray[i].onmouseover = function () { linkMouseover() };
aClassArray[i].onmouseout = linkMouseout;
}
}
function linkMouseover() {
var divTips = document.createElement("div");
var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
divTips.className = "divTips";
divTips.style.left = evt.clientX + "px";//+px兼容FF
divTips.style.top = evt.clientY + "px";//+px兼容FF
divTips.innerHTML = "test";
document.getElementById("divA").appendChild(divTips);
}
function linkMouseout() {
var divTag = document.getElementsByTagName("div");
for (var i = 0; i < divTag.length; i++) {
if (divTag[i].className == "divTips") {
document.getElementById("divA").removeChild(divTag[i]);
}
}
}
window.onload = initOnOver;
</script>
</head>
<body>
<div id="divA">
<a href="http://www.baidu.com" rel="external nofollow" class="aClass">百度</a>
<br />
<br />
<br />
<a href="http://www.163.com" rel="external nofollow" class="aClass">网易</a>
<br />
<br />
<br />
<a href="http://www.google.com" rel="external nofollow" class="aClass">Google</a>
</div>
</body>
</html>