javascript event在FF和IE的相容傳參心得(絕對好用),eventff
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相容FFdivTips.style.top = evt.clientY + "px";//+px相容FFdivTips.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>
javascript對於Event事件在firefox與ie中的調用問題
dom標準說,event對象必須作為唯一的參數傳給事件處理函數。所以,在dom相容的瀏覽器(Mozilla,Safari,Opera)中訪問事件對象,要這麼做:
odiv.onclick = function () {
var oevent = arguments [0];//第一個參數
]
或者直接具名引數:
odiv.onclick = function (oevent ) {
//oevent 就是事件對象
]
ie與ff的相容性問題都有那些??經常遇見需要注意的問題舉例
1. document.form.item 問題
現有問題:
現有代碼中存在許多 document.formName.item("itemName") 這樣的語句,不能在 MF 下運行
解決方案:
改用 document.formName.elements["elementName"]
其它
參見 2
2. 集合類對象問題
現有問題:
現有代碼中許多集合類對象取用時使用 (),IE 能接受,MF 不能。
解決方案:
改用 [] 作為下標運算。如:document.forms("formName") 改為 document.forms["formName"]。
又如:document.getElementsByName("inputName")(1) 改為 document.getElementsByName("inputName")[1]
3. window.event
現有問題:
使用 window.event 無法在 MF 上運行
解決方案:
MF 的 event 只能在事件發生的現場使用,此問題暫無法解決。可以這樣變通:
原代碼(可在IE中運行):
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>
新代碼(可在IE和MF中運行):
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>
此外,如果新代碼中第一行不改,與老代碼一樣的話(即 gotoSubmit 調用沒有給參數),則仍然只能在IE中運行,但不會出錯。所以,這種方案 tpl 部分仍與老代碼相容。
4. HTML 對象的 id 作為對象名的問題
現有問題:
在 IE 中,HTML 對象的 ID 可以作為 document 的下屬物件變數名直接使用。在 MF 中不能。
解決方案:
用 getElementById("idName") 代替 idName 作為物件變數使用。
5. 用idName字串取得對象的問題
現有問題:
在IE......餘下全文>>