码迷，mamicode.com
首页 > 编程语言 > 详细

Javascript的DOM中兼容问题以及解决兼容问题的方法

时间：2019-08-31 17:33:21      阅读：76      评论：0      收藏：0      [点我收藏+]

标签：实现   als   ble   efi   pos   type   如何获取   事件传播   doctype   

一、获取非行内样式的方法和它的兼容问题及解决方式

方 法 一：getComputedStyle(obox,false) 

第一个参数表示要获取的对象，第二个值指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）false也可以。主要针对正常浏览器

方 法 二：Element.currentStyle  在IE浏览器中使用

解决兼容问题的方式：

function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         #box{width:100px;height:100px;border: solid 1px black;}
    </style>
</head>
<body>
        <div id="box" style="background: red"></div>
</body>
<script>
    var obox = document.getElementById("box")
    // 行内样式；是可以获取和设置的
    console.log(obox.style.background);// red
    // 用style操作获取不了非行内样式
    console.log(obox.style.border);// 为空

    // 如何获取非行内样式,只能获取不能设置；
    // Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计
    // 算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
    console.log(getComputedStyle(obox,null));
    //第一个参数表示要获取的对象，第二个值指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）false也可以。
    console.log(getComputedStyle(obox,null).width);//100px;

    // 由于getComputedStyle()存在兼容，另一个获取方法
    // Element.currentStyle可以在ie里用
    console.log(obox.currentStyle);//undefined
    // console.log(obox.currentStyle.width)


    // 为了解决兼容问题，可以将这两种放进一个封装函数中

    function getStyle(ele,attr){
        var a = "";
        if(ele.currentStyle){
            a = ele.currentStyle[attr];//attr是一个变量，变量用中括号
        }else {
            a = getComputedStyle(ele,false)[attr];
        }
        return a;
    }



    getStyle(obox,"width")


    // 简易写法
    function getStyle(ele,attr){
        
        if(ele.currentStyle){
            return ele.currentStyle[attr];//attr是一个变量，变量用中括号
        }else {
            return getComputedStyle(ele,false)[attr];
        }
    }



    getStyle(obox,"width")
    
    // 这样绝大部分浏览器兼容问题就解决了
    
    
</script>
</html>

 

二、获取事件对象的方法和它的兼容问题及解决方式

1.IE中：          window.event
 
2.正常浏览器中：    对象.on事件 = function(event){}
 
解决兼容问题的方式：
    document.onclick = function(eve){
       var e = eve || window.event;
   }

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background: red;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    
    // 如何获取事件对象？
    // 给事件处理函数一个形参；
    var obox = document.querySelector(".box") 

    // obox.onclick = function(abc){
    //     console.log(abc)
    // }
    // obox.onclick = function(){
    //     console.log(window.event)  //可以在ie使用；
    // }

    // 解决兼容

    obox.onclick = function(eve){
        var e = eve || window.event;
        console.log(e);//通过event获得一个对象
        
    }

    
</script>
</html>

 

三、阻止事件冒泡的方法和它的兼容问题以及解决方式

方 法 一：eve.stopPropagation(); 主要针对正常浏览器

方 法 二：eve.cancelBubble = true; 在IE浏览器中使用

解决兼容问题的方式：

function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }

 案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background: red
        }

        .box2 {
            width: 300px;
            height: 300px;
            background: blue
        }

        .box3 {
            width: 200px;
            height: 200px;
            background: green
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>
<script>
    // 事件冒泡
    // 当触发某个元素的某个事件时，它会先触发自己的对应事件，然后，“依次向上”触发所有父级的“相同事件”,如果中间有父级没有“相同事件”，继续向上触发
    // 事件流：事件执行顺序我们叫他事件流。
    // 事件流中事件冒泡的由来：IE公司认为，如果你面前有个靶子，你的飞镖射中了其中一环，并不仅仅是只对这一环产生了操作，而是对整个靶子都产生了操作。

    // 所以，当 最里面 的元素触发了事件的时候，会依次向上触发所有元素的相同事件（从触发事件的元素开始一直向上触发），但是事件冒泡对我们几乎没有任何好处，
    // 所以我们需要阻止事件冒泡。

    //阻止事件冒泡的两种方法
    // eve.stopPropagation();            
    // eve.cancelBubble = true;        //兼容IE

    // 解决兼容问题：封装一个函数
    function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }

    var obox1 = document.querySelector(".box1");
    var obox2 = document.querySelector(".box2");
    var obox3 = document.querySelector(".box3");

    obox1.onclick = function(eve){
        var e = eve || window.event;
        stopBubble(e);
        alert("red");
    }

    obox2.onclick = function(eve){
        var e = eve || window.event;
        stopBubble(e);
        alert("blue");
    }

    obox3.onclick = function(eve){
        var e = eve || window.event;
        stopBubble(e);
        alert("green");
    }

</script>
</html>

 

 

四、键盘事件的兼容问题以及解决方式

解决兼容问题的方式：
var e = eve || window.event;
var code = eve.keyCode || window.which;

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    // 和鼠标事件一样，键盘事件也存在兼容；
    // var e = eve || window.event;
    // var code = e.keyCode || e.which;

    // 案例：通过键盘上下左右，控制页面中的元素位置移动

    var obox = document.querySelector("div");
    // 这个div并没有焦点；所以：
    //先创一个事件对象；
    document.onkeydown = function(eve){
        var e = eve || window.event;
        var code = eve.keyCode || window.which;

        // 这里通过选择语句中的switch();
        switch(code){
            // 获取元素与父元素之间的偏移距离；用offsetLeft/offsetTop;
            case 37 : //左键
            obox.style.left = obox.offsetLeft-10 + "px";break;
            case 38 : //上键
            obox.style.top = obox.offsetTop-10 + "px";break;
            case 39 : //右键
            obox.style.left = obox.offsetLeft+10 + "px";break; // 向上向右就是+10；
            case 40 : //下键
            obox.style.top = obox.offsetTop+10 + "px";break;
        }
    }
</script>
</html>

 

 

五、阻止默认事件的方法和它的兼容问题以及解决方式

方 法 一：

e.preventDefault();
window.event.returnValue = false;

方 法 二：

在事件处理函数的最后加上 return false;
 
解决兼容问题的方式：
function stopDefault(e){
    if(e.preventDefault){
        e.preventDefault()
    }else{
        e.returnValue = false;
    }
}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 120px;
            height: 220px;
            background: #fff;
            border: 1px solid #000;
            position: absolute;
            left: 0;
            right: 0;
            display: none;
        }
        .box ul {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>刷新</li>
            <li>复制</li>
            <li>粘贴</li>
            <li>剪切</li>
            <li>删除</li>
        </ul>
    </div>
</body>
<script>
    // 浏览器默认行为；
    // 默认事件：就是浏览器自己触发的事件。比如：a链接的跳转，form提交时的跳转，鼠标右键菜单。
    // 当触发鼠标的右键事件时，会弹出右键菜单，这就是默认事件情况之一;

    // 如何阻止默认事件两种方法
    //一、解决兼容
    // e.preventDefault()();
    // window.event.returnValue = false;

    // 二、
    // 在事件处理函数的最后加上 return false;


    // 案例：自定义右键菜单

    // oncontextmenu 鼠标点击右键；
    var obox = document.querySelector(".box");
    // 给阻止事件的方法封装为一个函数
    function stopDefault(e){
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
    }

    document.oncontextmenu = function(eve){
        var e = eve || window.event;
        
        obox.style.display = "block";
        // 阻止默认设置
        // stopDefault(e);
    
        obox.style.left = e.offsetX + "px";
        obox.style.top = e.offsetY + "px";
        //return false 也可以阻止默认事件：必须函数里的最后一位
        return false;

    }

    document.onclick = function(){
        obox.style.display = "none";
    }

    function stopDefault(e){
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
    }
</script>
</html>

 

 

六、事件监听器

事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；
 
    DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；
        元素.onclick = function(){}
 
    DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；
 
    非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。
 
    oDiv.addEventListener(‘click‘,fn,false);
    oDiv.removeEventListener(‘click‘,fn ,false);
 
    IE下：
 
    只有冒泡阶段,所以没有第三个参数；（这里的事件名需要加on）
    oDiv.attachEvent()；
    oDiv.detachEvent() ;
 
解决兼容问题的方式：
1.封装成对象的方式
    var EventUtil={
        addHandler:function(DOM,EventType,fn){
            if(DOM.addEventListener){
                DOM.addEventListener(EventType,fn,false);
            }else if(DOM.attachEvent){
                DOM.attachEvent(‘on‘+EventType,fn)
            }else{
                DOM[‘on‘+EventType]=fn
            }
        },
        removeHandler:function(DOM,EventType,fn){
            if(DOM.removeEventListener){
                DOM.removeEventListener(EventType,fn,false)
            }else if(DOM.detachEvent){
                DOM.detachEvent(‘on‘+EventType,fn)
            }else{
                DOM[‘on‘+EventType]=null;
            }
        }
    }


2.封装成两个函数的方式
    function addEvent(obj,inci,back){
        if(obj.addEventListener){
            obj.addEventListener(inci,back);
        }else if(obj.attachEvent){
            obj.attachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = back;
        }
    }
          
    function removeEvent(obj,inci,back){
        if(obj.removeEventListener){
            obj.removeEventListener(inci,back,false);
        }else if(obj.detachEvent){
            obj.detachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = null;
        }
    }

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    var obox = document.querySelector(".box");
    //  事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；
    // DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；
    // 元素.onclick = function(){}

    // 赋值式绑定 (DOM0级事件处理阶段)
    // obox.onclick = function(){
    //     console.log(1);   
    // }

    // obox.onclick = function(){
    //     console.log(2);   
    // }
    // 当你点击元素时，只能获取1,2中的一个值；
    // 删除赋值式事件绑定；
    // obox.onclick = null;
    // 特点：常用，没有兼容，简单

    
    // 监听式绑定(DOM2级事件处理):可以重复绑定；
    // 非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。

    
    // EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，
    // 当该对象触发指定的事件时，指定的回调函数就会被执行。
    // oDiv.addEventListener(‘click‘, fn, false);
    // 第一个参数表示：表示监听事件类型的 字符串 。
   
    // 第二个参数表示：当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。
    
    // 第三个参数表示：当第三个参数(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，
    // 并且两个元素都对同一事件注册了一个处理函数时，所发生的事件 冒泡和事件捕获 是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。
    // 第三个参数可写可不写；

    // oDiv.removeEventListener(‘click‘, fn, false);
    // 删除使用 EventTarget.addEventListener() 方法添加的事件。
    
    // IE下：

    // 只有冒泡阶段, 所以没有第三个参数；（这里的事件名需要加on）
    // oDiv.attachEvent() ；
    // oDiv.detachEvent();

    // 冒泡：从下往上（从里往外）
    // 捕获：从上往下（从外往内）

    // 如何解决兼容问题
    // 将对象放入到括号内
    // cb表示事件处理函数
    function removeEvent(ele,type,cb){
        if(ele.removeEventListener){
            ele.removeEventListener(type,cb)
        }else if(ele.detachEvent){
            ele.detachEvent("on"+type,cb)
        }else{
            ele["on"+type] = null;
        }
    }

    function addEvent(ele,type,cb){
        if(ele.addEventListener){
            ele.addEventListener(type,cb)
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,cb)
        }else{
            ele["on"+type] = cb;
        }
    }

    



</script>

</html>

 

 

七、事件委托中事件源的兼容问题

解决兼容问题的方式：
 
var t = e.target || e.srcElement;

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul {
            background: #ccc
        }

        li {
            padding: 10px 0;
            margin: 10px 0;
            background: red
        }
    </style>
</head>

<body>
    <ul>
        <li>link1</li>
        <li abc="l">link2</li>
        <li abc="l">link3</li>
        <li abc="l">link4</li>
        <li>link5</li>
    </ul>
</body>
<script>
    var ali = document.querySelectorAll("ul li");

    var oul = document.querySelector("ul")
    oul.onclick = function(eve){
        var e = eve || window.event;

        var t = e.target || e.srcElement;   // 也是一种兼容

        if(t.getAttribute("abc") == "l"){
            console.log(e.target.innerHTML)
        }
        
    }
</script>
</html>

 

Javascript的DOM中兼容问题以及解决兼容问题的方法

标签：实现   als   ble   efi   pos   type   如何获取   事件传播   doctype   

原文地址：https://www.cnblogs.com/yangbodeboke/p/11437559.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！