js中的兼容问题汇总

在使用js的过程中,往往会发现关于IE浏览器的兼容问题,当然微软现在自己也打算抛弃IE,推出了edge浏览器,对于前端来说是个好消息.

但IE的用户占比仍然不容小觑,因此这里整理下常见的几个兼容问题附上解决方案,以免不时之需.

1.非行内样式的获取

　　IE浏览器:element.currentstyle+attr

　　正常浏览器(chrome,FF):getComputedStyle(element,false)+attr

这两类浏览器以下都简称为IE和正常

接下来封装一个函数,方便调用(兼容所有浏览器)

function getStyle(ele,attr){

        var a = "";

        if(ele.currentStyle){               　　　　　//IE

            a = ele.currentStyle[attr];

        }else{

            a = getComputedStyle(ele,false)[attr];  //正常

        }

2.获取事件对象

　　 IE : window.event

　　正常 : 给事件传参

obox.onclick=function(eve){

        var e=eve||window.event;

        console.log(e)

    }

3.阻止事件冒泡

事件冒泡:当触发元素的某个事件时,它会先触发自己的对应事件,然后依次向上触发所有父级的相同事件;上一父级没有相同事件,继续向上触发

需要注意的是onmouseenter和onmouseleave不支持事件冒泡

　　 IE : event.cancelBubble=true

　　正常 : event.stopPropagation()

function stopBubble(e){

            if(e.stopPropagation){

                e.stopPropagation();　　　　//正常

            }else{

                e.cancelBubble = true;    //IE

            }

        }

4.事件委托

事件委托:将多个相同元素的相同事件,添加给页面上现存的共同的父元素,利用事件冒泡,配合事件源,找到真正点击的元素

　　IE : event.srcElement

　　正常 : event.target

function tar(t){

    var t = e.target || e.srcElement;}

5.添加事件绑定方式

事件绑定方式有两种:赋值式和监听式

(1)赋值式: (DOM 0级事件绑定)

　它比较常用,没兼容问题

　　例子:obox.onclick=function(){}

(2)监听式: (DOM 2级事件绑定)

　　IE : element.attachEvent("on"+type,cb)

　　正常 : element.addEventListener(type,cb)

function addEvent(ele,type,cb){

        if(ele.addEventListener){

            ele.addEventListener(type,cb)　　　//监听式:正常

        }else if(ele.attachEvent){

            ele.attachEvent("on"+type,cb)    //监听式:IE

        }else{

            ele["on"+type] = cb;    　　　　　//赋值式

        }

    }

6.删除事件绑定方式

同样的,事件绑定方式的删除对应

(1)删除赋值式事件绑定

　　例子:obox.onclick=null

(2)删除监听式事件绑定:

　　IE : element.detachEvent("on"+type,cb)

　　正常 : element.removeEventListener(type,cb)

function removeEvent(ele,type,cb){

        if(ele.removeEventListener){

            ele.removeEventListener(type,cb)　 //监听式:正常的删除

        }else if(ele.detachEvent){

            ele.detachEvent("on"+type,cb)　　　//监听式:IE的删除

        }else{

            ele["on"+type] = null;　　　　　　 //赋值式的删除

        }

    }

7.键盘事件的键值获取

IE : event.which

正常 : event.keycode

function code(eve){

var e=eve||window.event;         //先获取事件

 var code=e.keyCode||e.which;   //再获取键值

}

8.阻止默认事件

IE : event.returnValue = false

正常 : event.preventDefault()

 function stopDefault(e){

        if(e.preventDefault){

            e.preventDefault()         //正常

        }else{

            e.returnValue = false;    //IE

        }

    }

9.鼠标的页面位置pageX,pageY

 function getPage(e) {

      var pageX = e.pageX || e.clientX + getScroll().scrollLeft;

      var pageY = e.pageY || e.clientY + getScroll().scrollTop;

      return {

        pageX: pageX,

        pageY: pageY

      }

    }

10.滚轮移动距离scrollTop

function getScroll() {

    if (document.documentElement.scrollTop) {

    return    document.documentElement.scrollTop;

    } else if (document.body.scrollTop) {

        return document.body.scrollTop;

}

11.严格模式的开启

;(function(){"use strict"})();

碰到新的兼容问题会继续更新,欢迎讨论

巴特西

js中的兼容问题汇总

最新文章

热门文章