常用javascript的兼容问题总结

    以下都是项目中经常会应用到的一些js兼容性方面的问题,不常用的就不写了。

    1、event事件获取    

        Firefox不只是window.event, Firefox的事件对象只有在事件发生时才能作为当前执行函数的第一个参数来获取;而IE支持window.event去不支持参数获取;因此可以通过 e = e || window.event 来兼容浏览器;

    2、获取事件源    

        Firefox支持通过 e.target 来获取事件源,IE支持通过 e.srcElement 来获取事件源,Chrome两种都支持;因此可以通过 srcElement = e.srcElement || e.target 来兼容浏览器;

    3、event.x 与 event.y 问题    

       Firefox中只有event.pageX ,没有event.x,IE中有event.x ,这两个作用是一样的;因此可以通过pgX = event.x || event.pageX;    

    4、获取DOM属性    

        Firefox中的自定义属性可以通过getAttribute()方法来获取,ie可以直接通过.来获取属性    

    5、Firefox和IE删除节点的方法不同:    

        var testNode = document.getElementById("test");    

        testNode.removeNode(true);//ie    

        testNode.parentNode.removeChild(testNode);//FF    

    6、注册监听和移除监听    

        ie支持attachEvent,detachEvent;火狐支持addEventListener,removeEventListener; 用以下方式可以做到兼容:

        function addListener(element,eventName,handler){
      if(element.addEventListener){
         element.addEventListener(eventName,handler,false);
      }else if(element.attachEvent){
         element.attachEvent("on"+eventName,handler);
      }else{
         element["on"+eventName] = handler;
      }
    }
   function removeListener(element,eventName,handler){
      if(element.removeEventListener){
         element.removeEventListener(eventName,handler,false);
      }else if(element.detachEvent){
         element.detachEvent("onclick",handler);
      }else{
         element["on"+eventName] = null;
      }
   };

   7、阻止事件冒泡函数

       现在大多数浏览器对e.cancelBubble和e.stopPropagation都支持,但是还有一些是不支持e.cancelBubble的,因此可以通过以下方式来兼容:

   function stopBubble(e){
      var e = e || window.event;
      if(e.stopPropagation){
         e.stopPropagation();
      }else{
         e.cancelBubble = true;;
      }
   }

   8、innerText
       IE支持innerText,FIREFOX不支持,FF中设置内容文本是用textConent属性.

    

   9. body 对象
       FF的 body 在 body 标签没有被浏览器完全读入之前就存在,而IE则必须在 body 完全被读入之后才存在,
       在IE下文档没有载入完时,在body上appendChild会出现空白页面的问题。
       解决方法:
       一切在body上插入节点的动作,全部在onload后进行      

   10. nodeName 和 tagName 问题
    在FF中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值,在IE中,nodeName 的使用有问题
    解决方法:
    使用 tagName,但应检测其是否为空;

posted @ 2013-03-14 16:05  小小齐  阅读(94)  评论(0)    收藏  举报