今天在完成前端的簡單練習時發現了一些兼容性的問題,百度后得以解決.
這里主要討論Firefox與Chrome的兼容性問題.
textContent與 innerText
在javascript中, 為了獲取節點的文本, 我們可以考慮使用節點的textContent、或者innerText,
然而,兩者都並不能很好對所有瀏覽器進行兼容.
- textContent: 不支持低版本 IE; 兼容 Chrome / Firefox / Safari / Opera / IE9.
- innerText: 不支持Firefox; 兼容其他瀏覽器;
為了保證兼容性, 可以通過自定義的函數來解決;從另一位博主中找到了可借鑒的代碼:
var div = document.getElementById("content");
function getInnerText(element) {
return (typeof element.textContent == "string") ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
if (typeof element.textContent == "string") {
element.textContent = text;
} else {
element.innerText = text;
}
}
setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!"
相關文檔: MDN textContent;
event的兼容性問題
開發過程中,我們會給節點添加事件監聽器,例如:
element.addEventListener("click", HandleClick);
function HandleClick() {
console.log(event.target);
}
為了在HandleClick()函數中獲取到觸發該函數的對象,我們可能會用到event.target, 這段代碼可以在Chrome上正常運行,但在Firefox中出現報錯,
控制台將顯示不存在event對象.
說明: Firefox的event只能在事件發生的現場使用(來自百度).
解決方法:
1.我們可以通過修改html標簽, 傳遞event參數給相應的函數:
<button onclick = "HandleClick(event)">
這樣便獲取了event, 接下來就可以在HandleClick()函數中愉快地使用event了;(當然,event的某些屬性兼容性也需要另外考慮)
2.不傳遞event對象, 直接在 HandleClick()函數中獲取;
代碼來自另一位博主:
unction HandleClick()
{
var evt = window.event || arguments.callee.caller.arguments[0]; // 獲取event對象
var src = evt.srcElement || evt.target; // 獲取觸發事件的源對象
var iKeyCode = evt.keyCode || evt.which; //獲取按鈕代碼
alert(src.value); // 打印該對象的value屬性
if (window.navigator.userAgent.indexOf("IE")>=1){
evt.keyCode =0;
evt.returnValue=false;
}else{
evt.preventDefault();
}
}
此時我們的html文件中不需要傳遞event給HandleClick函數, 如下:
<button onclick = "HandleClick()"
參考: