======================================================================
一些參考資料
http://nexgenmedia.net/evang/iemozguide/
http://www.javascriptkit.com/domref/
通過firefox自帶的工具學習的方法:
打開TOOLS -> dom inspector , 左側選中某個控件後, 右側可以選擇 JAVASCRIPT OBJECT
通過自帶工具調試javascript
TOOLS -> JavaScript Console
打開所有js警告:
在地址欄裏錄入:about:config
雙擊,設置 javascript option restict 打開爲true 能夠看到很多警告,利於糾錯
☆ 關於調試JS的tip
調試js時,經常受緩存的影響,頁面不會加載最新的代碼,爲此解決如下:
在新頁面裏打開原來的地址,關閉原來的頁面,ok了.
以上方法在IE和FF下都有效.
在ff下按Ctrl+shift+del, 打開清除私有信息對話框, 點擊立即清除, 回到頁面後reload一次也是可行的方案.
☆ IE -> firefox javascript類
△ document.all -> document.getElementById
並且控件儘量用id,而不是name標識
爲了兼容舊代碼,參考下面的函數, 把document.all 替換爲 document_all即可
function document_all(objName,doc){
if (!doc) doc = document;
var obj;
obj = doc.getElementById(objName);
if (!obj) obj = doc.getElementsByName(objName)[0];
return obj;
}
提示:
如果控件只有name,沒有id, 用getElementById時:
IE:也可以找到對象
FF:返回NULL
△ 獲得form裏某個元素的方法
formObj.elements['user_ name'];
△ 取集合元素時, ie支持 [],() 2種寫法, 但是ff僅支持[],如:
table.rows(5).cells(0)
改爲:
table.rows[5].cells[0]
△ 判斷對象是否是object的方法應該爲
if( typeof 對象變量 == "object")
而不是 if(對象變量 == "[object]")
△ eval(對象名稱) -> document.getElementById
FF支持eval函數
△ 通過id直接調用對象
對象id.value = ""
改爲
document.getElementById("name").value = ""
△ window.event 的改造, firefox和opera會在調用函數時傳入event對象,
ie用全局對象window.event,可以修改事件處理函數,接收event對象
function editmask_keydown(event){
event = event || window.event;
這樣定義對系統改動比較大, 所以從底層轉換處理,可能更好一些
參考 ie_to_w3c.js
△
mX = event.x ? event.x : event.pageX;
△ 不支持onpropertychange事件
△ obj.insertAdjacentElement("beforeBegin",objText);
改爲用
obj.parentNode.insertBefore(objText,obj);
△ createElement不支持HTML代碼
用document.write(esHTML); 可以解決一部分情況
△ innerText -> textContent
△ 對象名稱中的$不能識別, 建議改爲_
objName = "t1$spin"
改爲
objName = "t1_spin"
△ 事件名稱和註冊方式的變化
addEventListener("blur", myBlur, false);
△ FF裏設置Attribute爲某個對象,然後再取出來,這時候對象的屬性都丟失了?
objText.setAttribute("dropdown_select",obj);
alert(obj.id) //正確的名字
obj = objText.getAttribute("dropdown_select");
alert(obj.id) //null
在IE下沒有問題, FF對setAttribute來說,第2個參數都是字符串型的!!!
所以如果第2個參數是對象時,相當於調用對象的 toString() 方法了
解決的方法是用下面的調用方式:
objText.dropdown_select = obj;
obj = objText.dropdown_select
但是有資料說對用戶自定義的屬性,必須用setAttribute, 看來什麼都要實踐證實一下!
△ className -> class
FF下用class代替IE下的className
由於class是關鍵字, 所以需要用 setAttribute/getAttribute才行
setAttribute("class","css樣式名稱");
△ 在html裏定義的屬性,必須用getAttribute才行
<td id="TD1" isOBJ="true">
獲取時:
document.getElementByID("TD1").isOBJ 總返回 undefined
應該用:
document.getElementByID("TD1").getAttribute("isOBJ")
△ FF裏select控件不再是:總是在頂端顯示
所以需要設置控件的zIndex
△ 對於if ( vars == undefined ) 下面的值用於判斷是等同的
undefined
null
false
0
△ 如果FF調用obj.focus(); 報錯,請嘗試改爲:
window.setTimeout( function(){ obj.focus(); }, 0);
現在的方案是在失去焦點前判斷
△ 關於在控件的blur事件裏判斷下一個獲得焦點的控件的tip, 類似於Powerbuilder的item focus changing事件
用途舉例: 對dropdown控件裏的text控件,
如果下一個獲得焦點的對象是selection,則不做錄入控制,如果不是,則提示,並設置焦點爲text
經測試:
IE: blur發生在focus後
FF: blur發生在focus前調用
IE: 在onbeforedeactivate事件裏用activeElement可以獲得下一個對象
FF: blur事件發生在focus前面,而FF又沒有中間事件
下面的都不行!
target
currentTarget
relativeTarget
看來需要這樣處理!
註冊所有控件的onblur,設置lastElement
在focus裏處理上一個? 也不行啊!
能否模擬自己的itemfocuschanging事件?
IE: onbeforedeactivate
FF: 搶先註冊onfocus和onblur, 在裏面設置activeElement
在onfocus裏設置activeElement後,
調用onbeforedeactivate
如果onbeforedeactivate返回false,則設置focus爲原來的控件!
在控件失去焦點前,設置lastObj=this
在控件獲得焦點時,先判斷lastObj是什麼
△ FF不能處理alert造成的死循環情況
△ FF下,keyCode是隻讀的, 那把回車轉換爲tab怎麼辦? 在錄入時進行轉換怎麼辦??
變通的方法是:
1. 回車跳轉 -> 自己寫跳轉處理代碼.
2. 在能夠錄入的控件裏,
把選中的部分替換爲新錄入的內容: var text = String.fromCharCode(event.keyCode);
同時阻止按鍵事件上傳, 調用: event.preventDefault()
△ selection的難度較大,因爲IE和FF沒有接近的函數
爲此專門做了一個對象來消除差異
感覺firefox的selection機制使用起來更簡潔一些
這種模式是橋樑模式還是
△ <button> 會被firefox解釋爲提交form或者刷新頁面???
需要寫標準<button type="button">
△ 在firefox裏, document.onfocus裏獲得不到實際獲得焦點的控件?
爲什麼document.keydown可以呢?
△ children -> childNode()
△ sytle.pixelHeight -> style.height
△ obj.attachEvent("onfocus", editmask_focus);
obj.onfocus = editmask_focus;
上面2句竟然有區別!
如果用 attachEvent, 就不能用 this 關鍵字了!
通用的做法是不用this, 而是用 event.srcElement
△ fireevent不能用
☆ IE -> firefox css類
△ cursor:hand -> cursor:pointer
△ expression firefox不支持
在IE下expression也非常消耗CPU,所以不應該使用!!
爲了達到較好的效果,應該建立自己的expression to javascript的處理函數
這樣在IE和FF裏就都能用了.
