js一些常见的兼容问题

整理了一些一些js兼容问题:

1.非行内样式的获取:

IE浏览器:element.currentstyle+attr

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

封装函数(兼容写法):

function getStyle(ele,attr){
        var a = "";
        if(ele.currentStyle){                    //IE
            a = ele.currentStyle[attr];   
        }else{
            a = getComputedStyle(ele,false)[attr];  //正常
        }

2.获取事件对象:

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"})();

 

posted @ 2020-06-04 15:02  结发授长生  阅读(192)  评论(0)    收藏  举报