欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js浏览器兼容性问题--整合(上)

程序员文章站 2022-07-04 15:02:41
...

今天,整理了一些解决常见的浏览器兼容的一些方法,有需要的朋友可以看看!
1.其他浏览器与IE浏览器,事件对象的兼容写法:

var e = eve ? eve : window.event;

2.其他浏览器与IE浏览器,阻止事件冒泡的兼容写法:

//IE浏览器:
e.cancelBubble = true;
//其他浏览器:
e.stopPropagation();
//封装的写法:
function stopBubble(e){
			if(e.stopPropagation){
				e.stopPropagation();
			}else{
				e.cancelBubble = true;
			}
		}

3.其他浏览器与IE浏览器,阻止默认事件的兼容写法:

//IE浏览器:
e.returnValue = false;
//其他浏览器:
e.preventDefault();

//封装的写法:
function stopDefault(e){
			if(e.preventDefault){
				e.preventDefault();
			}else{
				e.returnValue = false;
			}
		}

4.其他浏览器与IE浏览器,事件监听的兼容写法:

//IE浏览器:
元素.attachEvent("onclick",function(){}};
//其他浏览器:
元素.addEventListener("click",function(){}};

//封装的写法:绑定事件与删除事件
//绑定:
function addEvent(ele,eventType,callback){
			if(ele.attachEvent){
				ele.attachEvent("on"+eventType,callback);
			}else{
				ele.addEventListener(eventType,callback);
			}
		}
//删除:
function removeEvent(ele,eventType,callback){
	if(ele.detachEvent){
		ele.detachEvent("on"+eventType,callback);
	}else{
		ele.removeEventListener(eventType,callback);
	}
}

5.其他浏览器与IE浏览器,事件委托的兼容写法:

function eveEnt(achild,callback){
	return function(eve){
		var e = eve || window.event;
		var target = e.target || e.srcElement;
		for(var i=0;i<achild.length;i++){
			if(achild[i] === target){
				callback.bind(target)(e);
			}
		}
	}
}