javascript event在FF和IE的兼容传参心得(绝对好用)
event在IE和FF不兼容,今天传参碰到些问题,参考网上的一些方法,有所心得:
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]//可以用这个解决
varsrc=evt.srcElement||evt.target;//后续还可以跟src
===========================================================================
附上练习代码
<!DOCTYPEhtml>
<html>
<head>
<title></title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<linkrel="stylesheet"href="css/ui-lightness/jquery-ui-1.10.4.custom.css"rel="externalnofollow"/>
<scriptsrc="js/jquery-1.10.2.js"></script>
<scriptsrc="js/jquery-ui-1.10.4.custom.js"></script>
<styletype="text/css">
.aClass,.aClass:visited{
font-size:36px;
text-decoration:none;
color:#0094ff;
}
.divTips{
font-size:20px;
color:red;
border:#f001pxsolid;
position:absolute;
width:100px;
height:30px;
}
</style>
<scripttype="text/javascript">
functioninitOnOver(){
vartitleTips={
"baidu":"百度网站提示",
"163":"163网站提示",
"google":"google网站提示"
}
varaTag=document.getElementsByTagName("a");
varaClassArray=[];
for(vari=0;i<aTag.length;i++){
if(aTag[i].className=="aClass"){
aClassArray[aClassArray.length]=aTag[i];
}
}
for(vari=0;i<aClassArray.length;i++){
vare;
aClassArray[i].onmouseover=function(){linkMouseover()};
aClassArray[i].onmouseout=linkMouseout;
}
}
functionlinkMouseover(){
vardivTips=document.createElement("div");
varevt=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);
}
functionlinkMouseout(){
vardivTag=document.getElementsByTagName("div");
for(vari=0;i<divTag.length;i++){
if(divTag[i].className=="divTips"){
document.getElementById("divA").removeChild(divTag[i]);
}
}
}
window.onload=initOnOver;
</script>
</head>
<body>
<divid="divA">
<ahref="http://www.baidu.com"rel="externalnofollow"class="aClass">百度</a>
<br/>
<br/>
<br/>
<ahref="http://www.163.com"rel="externalnofollow"class="aClass">网易</a>
<br/>
<br/>
<br/>
<ahref="http://www.google.com"rel="externalnofollow"class="aClass">Google</a>
</div>
</body>
</html>