JavaScript的兼容问题总结1

JavaScript的兼容问题1

<script>
        //
         // 特殊标签的获取
        // 两种方法都行
        // 方法1,低版本IE浏览器也支持
        // 方法2,不兼容低版本IE浏览器
        // 1,body标签
        方法1:var oBody1 = document.body;
        方法2:var oBody2 = document.querySelector('body');
        console.log(oBody1);
        console.log(oBody2);
        // 2,head标签
        方法1:var oHead1 = document.head;
        方法2:var oHead2 = document.querySelector('head');
        // 3,html标签
        方法1:var oHtml1 = document.documentElement;
        方法2:var oHtml2 = document.querySelector('html');
        console.log(oHtml1);
        console.log(oHtml2);
// -------------------------------------------------------------

        // 获取滚动高度执行效果:
        // 兼容语法:
        // 两种方法,一种可以获取数值,另一种结果一定是0
        // 通过逻辑或运算符 执行 短路赋值
        // 最终结果一定是有数据的数值
        var h = document.documentElement.scrollTop || document.body.scrollTop;
        var w = document.documentElement.scrollLeft || document.body.scrollLeft;
// -------------------------------------------------------------
        //对监听事件处理函数的兼容的问题
        // 普通浏览器
        // oDiv.addEventListener('click' , function(){})
        // IE低版本浏览器
        // oDiv.attachEvent('onclick' , function(){})
        // 兼容处理 事件对象 事件类型 事件额处理的函数
        // 通过函数的方式来实现兼容处理
        // 需要设定3个参数,分别是,事件对象,事件类型,事件处理函数
        // 参数1,事件对象     需要绑定监听事件的标签对象
        // 参数2,事件类型     绑定的事件类型,没有on的事件类型
        // 参数3,事件处理函数 最好是函数名称,也可以是匿名函数
        function myAddEvent(ele , type , fun){
            if( ele.addEventListener ){
                ele.addEventListener(type , fun);
            }else{
                ele.attachEvent('on'+ type , fun);
            }
        }
        // 通过函数,以兼容过的方式,给标签绑定监听事件
        myAddEvent( oDiv , 'click' , function(){console.log(123)} );
        myAddEvent( oP , 'click' ,  fun2);
// -------------------------------------------------------------

        // 兼容语法,获取标签的原始数据
        if (window.getComputedStyle) {
                left = window.getComputedStyle(oDiv).left;
                top = window.getComputedStyle(oDiv).top;
            } else {
                //低版本的IE
                left = oDiv.currentStyle.left;
                top = oDiv.currentStyle.top;
            }
// -------------------------------------------------------------

        // 1,兼容事件对象
        e = e || window.event;
        // 2,兼容按键编码
        var keyCode = e.keyCode || e.which;
// -------------------------------------------------------------

        //阻止浏览器的默认事件的方法的兼容
        if(e.preventDefault){
            // 普通浏览器,阻止默认事件的方式
            e.preventDefault()
        }else{
            // 低版本IE浏览器阻止默认事件方式
            e.returnValue = false;
        }
    
        console.log(123);
// -------------------------------------------------------------
    // 阻止冒泡 和 捕获 事件的传播。
    if(e.stopPropagation){
        e.stopPropagation();
       }else{
            e.cancelBubble = true;
       }```