• JS兼容性问题(FF与IE)


    JS兼容性问题(FF与IE)

    不同浏览器中js兼容问题大全

    1.document.formName.item('itemName')问题

    说明:

    复制代码
    1 //IE下(两种)
    2 document.formName.item("itemName");
    3 document.formName.elements ["elementName"];
    4 //Firefox下
    5 document.formName.elements["elementName"];
    6 //解决方法:
    7 document.formName.elements["elementName"]
    复制代码

    2.集合类对象问题

    说明:

      IE下,可以使用()或[]获取集合类对象;

      Firefox下,只能使用[]获取集合类对象;

    解决方法:统一使用[]获取集合类对象.

    3.自定义属性问题

    说明:

      IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;

      Firefox下,只能使用getAttribute()获取自定义属性.

    解决方法:统一通过getAttribute()获取自定义属性.

    4.eval("idName")问题

    说明:

      IE下,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;

      Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象;

    解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.

    5.window.event问题

    说明:

      window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.

    解决方法:

    复制代码
    document.onmousemove=function (ev){
        var oDiv=document.getElementById('div1');
        
        var oEvent=ev||event;
        
        oDiv.style.left=oEvent.clientX+'px';
        oDiv.style.top=oEvent.clientY+'px';
    }
    复制代码


    6.event.x与event.y问题

    说明:

      用IE下,even对象有x,y属性,但是没有pageX,pageY属性;

      Firefox下,even对象有pageX,pageY属性,但是没有x,y属性;

    解决方法:

      使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX

    复杂点要考虑绝对位置:

    复制代码
     function getAbsPoint(e){
        var x = e.offsetLeft, y = e.offsetTop;
        while (e = e.offsetParent) {
            x += e.offsetLeft;
            y += e.offsetTop;
        }
        alert( " x: " + x + " , " + " y: " + y);
    }
        
    复制代码

    7.事件监听

    说明:

      IE提供了attachEvent和detachEvent两个接口;

      而Firefox提供 的是 addEventListener和removeEventListener两个接口;

    解决方法:

    复制代码
    if(oBtn.attachEvent){
            oBtn.attachEvent('onclick', aaa);
            oBtn.attachEvent('onclick', bbb);
        }
        else{
            oBtn.addEventListener('click', aaa, false);
            oBtn.addEventListener('click', bbb, false);
        }
    复制代码

    例子(事件绑定的公共函数):

     View Code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function myAddEvent(obj, sEvent, fn){ //绑定事件
    if(obj.attachEvent){
    obj.attachEvent('on'+sEvent, fn);
    }
    else{
    obj.addEventListener(sEvent, fn, false);
    }
    }

    function aaa(){
    alert('a');
    }

    function bbb(){
    alert('b');
    }

    window.onload=function (){
    var oBtn=document.getElementById('btn1');

    myAddEvent(oBtn, 'click', aaa);
    myAddEvent(oBtn, 'click', bbb);
    };
    </script>
    </head>

    <body>
    <input id="btn1" type="button" value="aaa" />
    </body>
    </html>

    8.事件源的获取

    说明:

      在使用事件委托的时候,通过 事件源获取来判断事件到底来自哪个元素,但是,在IE     下,event对象有srcElement属性,但是 没有target属性;Firefox下,even对象有target  属性,但是没有srcElement属性。

    解决方法:

    ele = function (evt){ // 捕获当前事件作用的对象
    evt = evt || window.event;
      return
        (obj=event.srcElement?event.srcElement:event.target; );
    }
     
     
    分类: JavaScript
  • 相关阅读:
    模板、皮肤、主题的定义
    table的thead/tbody/tfoot/tr/th/td
    JavaScript实现图片拖动功能 SpryMap
    js调用.net后台事件,和后台调用前台等方法总结
    图片轮播效果
    关于json的一点总结
    jQuery插件编写
    JavaScript中的数组
    HTML中Form属性Name和ID的区别
    DetailsView和FormView
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3286111.html
Copyright © 2020-2023  润新知