学步园

    最近的项目要求对同时支持IE和FireFox，为此深受其苦，尤其是对于我这个习惯了使用诸如："event.srcElement"、"outerHTML"、"parentElement"的人来说。许多在IE中使用起来得心应手的对象和方法，在W3C标准面前碰壁，没办法，有问题就得解决，大部分替代方案都是我从CSDN的提问或博客园的博客中找到的。

    1. FireFox不支持outerHTML，怎么办？

    解决这个问题，是从这位朋友的博客中找到的办法：http://www.cnblogs.com/doll-net/archive/2007/06/17/786835.html

    在使用outerHTML的js文件（或脚本块）中，添加一段DOM原型扩展方法：

    if(typeof(HTMLElement)!="undefined" && !window.opera)<br /> {<br /> HTMLElement.prototype.__defineGetter__("outerHTML",function()<br /> {<br /> var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)<br /> if(a[i].specified)<br /> str+=" "+a[i].name+'="'+a[i].value+'"';<br /> if(!this.canHaveChildren)<br /> return str+" />";<br /> return str+">"+this.innerHTML+"</"+this.tagName+">";<br /> });<br /> HTMLElement.prototype.__defineSetter__("outerHTML",function(s)<br /> {<br /> var r = this.ownerDocument.createRange();<br /> r.setStartBefore(this);<br /> var df = r.createContextualFragment(s);<br /> this.parentNode.replaceChild(df, this);<br /> return s;<br /> });<br /> HTMLElement.prototype.__defineGetter__("canHaveChildren",function()<br /> {<br /> return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());<br /> });<br /> }

    然后，就可以正常使用outerHTML对象了。

    2. FireFox不支持srcElement、parentElement，怎么办？

    我一般在这种情况下会使用到"srcElement、parentElement"对象：

    function checkInput()<br /> {<br /> var e = event.srcElement; // 当前触发事件的控件<br /> var td = e.parentElement; // 控件所在表格的单元格<br /> var tr = e.parentElement; // 控件所在表格的行</p> <p> // 拿到这三个对象我可以很方便的使用类似："tr.cells[0]"方式，来访问表格的任何一个单元格<br /> }

    使用FireBug插件，断点查看这三个对象都是"undefined"，怎么办呢？

    对于"event.srcElement"对象，我们完全可以使用"this"关键字来替换，即：在调用这个方法时候，传入参数使用this，而在方法定义中，就可以使用当前对象了。

    <input type="text" id="t1" onblur="checkInput(this)" /><br /> ........<br /> <mce:script type="text/javascript"><!--<br /> function checkInput(e)<br /> {<br /> // e等同于IE中event.srcElement的对象了<br /> }<br /> // --></mce:script>

    而对于"parentElement"对象，虽然FF不识别它，但FF识别"parentNode"，因此可以使用以下方式，解决parentElement的问题：

    function checkInput(e)<br /> {<br /> var td = e.parentElement || e.parentNode;<br /> var tr = td.parentElement || td.parentNode;</p> <p>}

    这是IE与FF区别的一部分总结，我想对于这些区别，不能视为洪水猛兽，望而兴叹，总会有替换方法的。