JavaScript中几种常见的兼容问题及解决方案

时间:2022-07-27 18:23:32

  在js中好用的东西一般都存在兼容问题,以下,我整理了一些常用的兼容处理方法,自己用的时候可以把他们放在一个JS文件中,需要用到时候直接引入,会比较方便.

一、获取非行内样式

function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}

【注】:这里arrt作为变量,要使用中括号语法。

二、事件对象的获取

//事件对象的获取兼容
function getEvent(ele){
var e = ele || window.event;
}

三、事件冒泡

//事件冒泡的兼容
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else {
e.cancelBubble = true;
}
}

四、阻止浏览器默认行为

//阻止默认事件的兼容
function prevent(eve){
var e = eve || window.event;
if(e.preventDefault){
e.preventDefault();
}else {
e.event.returnValue = false;
}
}

Tip:这里还有一种很简单的写法,在代码的最后一行加上return false;一定要注意的是,这句代码一定在所写事件的最后一行,不然后面的代码都执行不了,用的时候要注意。

五、事件绑定以及事件删除

  1.监听式事件的绑定

//监听式绑定
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;
}
}

  2.监听式事件的删除

//删除绑定
function romoveEvent(ele,type,cb){
if(ele.removeEventListener){
ele.romoveEventListener(type,cb);
}else if(ele.detachEvent){
ele.detachEvent("on"+type,cb);
}else {
ele["on"+type] = null;
}
}

六、键盘事件

//键盘检测兼容
function KeyC(eve){
var e = eve || window.event;
var keyc = e.keyCode || e.which;
return keyc;
}