js中常见的兼容问题处理

最新推荐文章于 2021-11-01 08:45:10 发布

吱呜猪猪猪~

最新推荐文章于 2021-11-01 08:45:10 发布

阅读量240

点赞数 1

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/nx990715/article/details/120102754

版权

1. 获取非行内样式的兼容

高级浏览器：getComputedStyle(元素,伪元素).CSS属性名
IE浏览器：元素.currentStyle.CSS属性名
兼容处理：

function getStyle(ele,attr){  // ele为元素；attr为属性
    if(ele.currentStyle){             
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele, null)[attr];         
    } 
}

2. 事件对象的兼容

高级浏览器：事件处理函数的第一个参数
IE浏览器：寻找window对象身上的event
兼容处理：var e = eve || window.event;

document.onclick = function(eve){
    var e = eve || window.event;
    console.log(e);     
}

3. 键盘事件的兼容

高级浏览器：eve.keyCode
IE浏览器：eve.which
兼容处理：var code = eve.keyCode || eve.which;

4. 阻止事件冒泡的兼容

高级浏览器：eve.stopPropagation();
IE浏览器：eve.cancelBubble = true;
兼容处理：

function stopBubble(e){  // e为事件对象的兼容，下同
    if(e.stopPropagation){
        e.stopPropagation();         
    }else{            
        e.cancelBubble = true;        
    }    
}

5. 阻止默认事件的兼容

高级浏览器：e.preventDefault();
IE浏览器：e.returnValue = false;
兼容处理：

function stopDefault(e){ 
    if(e.preventDefault){         
        e.preventDefault();        
    }else{          
        e.returnValue = false;      
    }    
}

6. 事件目标的兼容

高级浏览器：e.target
IE浏览器：e.srcElement
兼容处理：var tar = e.target || e.srcElement;

<body>
    <div class="box">
        <input type="button" value="点我">
    </div>
<script>
    var obox = document.querySelector(".box");
    obox.onclick = function(eve){
        var e = eve || window.event;
        var tar = e.target || e.srcElement; 
        console.log("事件源是：",this); 
        console.log("事件目标是：",tar); 
    }
</script>   
</body>

7. 监听式绑定事件（DOM2级事件绑定）与移除的兼容

监听式绑定事件的兼容
- 高级浏览器：
  - 元素.addEventListener(事件类型, 事件处理函数, 布尔值);
  - btn.addEventListener("click",fn,false);
    - false：事件冒泡，默认值
    - true：事件捕获
- IE浏览器：
  - 元素.attachEvent("on"+事件类型, 事件处理函数);
  - btn.attachEvent("onclick",fn);
  - IE只支持事件冒泡，不支持事件捕获
  - 在IE中，当一个元素绑定多个相同事件，先执行后绑定的事件
- 兼容处理：

function addEvent(ele,type,cb){  // ele为元素，type为事件类型，cb为callback回调函数，下同
    if(ele.addEventListener){   
        ele.addEventListener(type,cb,false);     
    }else if(ele.attachEvent){          
        ele.attachEvent("on"+type,cb); 
    }else{        
        ele["on"+type] = cb;     
    }   
}

- 移除监听事件的兼容
- 高级浏览器：
  - 元素.removeEventListener(事件类型, 事件处理函数, 布尔值);
  - btn.removeEventListener("click",fn,false);
- IE浏览器：
  - 元素.detachEvent("on"+事件类型,事件处理函数);
  - ele.detachEvent("on"+type,fn);
- 兼容处理：

function removeEvent(ele,type,cb){  
    if(ele.removeEventListener){     
        ele.removeEventListener(type,cb,false);  
    }else if(ele.detachEvent){          
        ele.detachEvent("on"+type,cb);     
    }else{          
        ele["on"+type] = null;     
    }   
}

吱呜猪猪猪~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中常见的兼容问题处理

1. 获取非行内样式的兼容高级浏览器：getComputedStyle(元素,伪元素).CSS属性名 IE浏览器：元素.currentStyle.CSS属性名兼容处理：function getStyle(ele,attr){ // ele为元素；attr为属性 if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedSt
复制链接

扫一扫