textContent、innerText 以及Event事件兼容性問題

今天在完成前端的簡單練習時發現了一些兼容性的問題,百度後得以解決.
這裏主要討論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()"

---

參考:

• 博客園 innerText兼容處理
• 博客園 Event事件的兼容性
• MDN textContent