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{
= 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
}
}本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
