javascript event在FF和IE的兼容傳參心得(絕對(duì)好用)

更新時(shí)間：2014年07月10日 17:38:24 投稿：whsnow

event在IE和FF不兼，下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下

event在IE和FF不兼容，今天傳參碰到些問題，參考網(wǎng)上的一些方法，有所心得：

aClassArray[i].onmouseover = function () { //代碼直接寫在里面是可以的，要傳參也可以傳，只是不方便復(fù)用 };

aClassArray[i].onmouseover =linkMouseover//不傳參的情況下是可以用的，但后續(xù)不能用 arguments.callee.caller.arguments[0]

aClassArray[i].onmouseover =linkMouseover()//加括號(hào)是錯(cuò)誤用法

aClassArray[i].onmouseover = function () { linkMouseover(this) };//this能傳進(jìn)去，可以alert出來，但evt.clientX + "px"就出問題了，是空的。。。 arguments.callee.caller.arguments[0]//可以用這個(gè)解決

var src = evt.srcElement || evt.target; //后續(xù)還可以跟src

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

附上練習(xí)代碼

<!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": "百度網(wǎng)站提示",
"163": "163網(wǎng)站提示",
"google": "google網(wǎng)站提示"
}
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對(duì)象
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  rel="external nofollow" class="aClass">百度</a>
<br />
<br />
<br />
<a  rel="external nofollow" class="aClass">網(wǎng)易</a>
<br />
<br />
<br />
<a  rel="external nofollow" class="aClass">Google</a>
</div>
</body>
</html>

您可能感興趣的文章: