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

Posted 2022-09-14 yangbodeboke

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript的DOM中兼容问题以及解决兼容问题的方法相关的知识，希望对你有一定的参考价值。

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

方法一：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>
         #boxwidth: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>
        .boxwidth: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中兼容问题以及解决兼容问题的方法的主要内容，如果未能解决你的问题，请参考以下文章

javaScript中一些常见的兼容性问题整理

javascript里面dom操作和兼容问题汇总

Javascript对于不同浏览器的兼容性

总结IE和Firefox的Javascript兼容性总结

vue项目系统兼容IE浏览器问题以及解决方案