zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    HBase 高性能加入数据
    Please do not register multiple Pages in undefined.js 小程序报错的几种解决方案
    小程序跳转时传多个参数及获取
    vue项目 调用百度地图 BMap is not defined
    vue生命周期小笔记
    解决小程序背景图片在真机上不能查看的问题
    vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化
    vue项目 一行js代码搞定点击图片放大缩小
    微信小程序进行地图导航使用地图功能
    小程序报错Do not have xx handler in current page的解决方法
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3286111.html
Copyright © 2011-2022 走看看