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