DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript event在FF和IE的兼容傳參心得(絕對好用)
javascript event在FF和IE的兼容傳參心得(絕對好用)
編輯:關於JavaScript     

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]//可以用這個解決

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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved