我遇到的Javascript 現象總結
1.事件轉移。
剛開始我用 var menu = window.event.srcElement; 來取得事件來源對象,事件是tr上的一個onclick事件,但是
在IE下其獲取到的對象是該tr下的中間那個td對象。當然這個方法暫時在FIREFOX下不兼容。要解決這個兼容性問題。只要
個方法帶個參數就好了,比如this,或者event……
2.在IE下DOM編程正常取到的對象在FIREFOX下變了。
當時覺得奇怪,而后調試發現:這個問題實在是firefox不對啦。他將無意義無必要的空白解釋成了子節點。
比如說<tr><td>1</td> <td>2</td></tr> 在IE下我們發現其子節點為2個。但是在firefox下,他理解為5個。“#text”表
示文本(實際是無意義的空格和換行等)在Firefox里也會被解析成一個節點。這里我們可以用判斷tagName來確定是否正確
,也可以用getElementsByTagName方法來彌補。lastChild firstChild 這些方法自然都發生了轉移……使用的話小心哦。
比如為了達到兼容。我添加了一些判斷。
while(oIMG.tagName != "IMG" )
{
oIMG = oIMG.previousSibling;
}
3.實現圖片變化效果,我原來用src動態改變。因為剛開始是用了一堆代碼。
var menu = oObj;
//該TR 下的 TD 組
var aTD = oObj.getElementsByTagName("TD");
var len = aTD.length;
//最后一TD對象
//lastchild 以及 firstchild 屬性 在ff ie中不統一
//var oTD = oObj.lastChild;
var oTD = aTD[len-1];
//alert(oTD.innerHTML);
//最后一IMG對象
var oIMG = oTD.lastChild;
while(oIMG.tagName != "IMG" )
{
oIMG = oIMG.previousSibling;
}
if (oIMG.src.indexOf("Triumph_1") != -1)
{
oIMG.src = oIMG.src.replace(/Triumph_1/g, "Triumph_2");
}
感覺臃腫。
但是覺得每次這樣怪麻煩,于是用innerHTML:
if (menu.innerHTML.indexOf("Triumph_1") != -1)
{
var temp = menu.innerHTML.replace(/Triumph_1/g, "Triumph_2");
menu.innerHTML = temp;
}
結果發現不行。為什么呢?