关于前端js兼容性问题的积累

1、event的兼容写法
(1) 实参不传入event
形参中无论是否接收event时，直接使用 event || window.event, 谷歌和ie正常，在火狐下会报event为undefined，需要在形参中接收event，并添加 arguments.callee.caller.arguments[0] 写发
(2) 实参传入event
形参接收event，可直接使用 event || window.event，谷歌，火狐，ie正常
建议

// 可不传入实参event，但需要接收形参，否则火狐下会报错
function aa(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
}

2、event.target的兼容写法

function aa(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
	// 获取触发该事件的元素
	var tag = e.target||e.srcElement;
}

3、函数中对形参进行设置默认值
谷歌和火狐正常，ie所有版本都不兼容，写法如下：

function aa(args='11'){		// 设置args默认为'11'
	console.log(args)
}
aa()	// 控制台输出 11
aa(22)  // 控制台输出 22

ie下可写为：

function aa(args){
	var aa = args == undefined ? '11' : args;
	console.log(aa)
}
aa()	// 控制台输出 11
aa(22)  // 控制台输出 22

4、火狐下对拖拽事件的不兼容
Firefox拖拽必须使用下面的方法去携带拖拽对象的数据：

event.dataTransfer.setData("id",xxx);  // 设置拖拽对象的id或者是拖拽对象的其他的数据
event.dataTransfer.getData("id");  // 获取所设置的拖拽对象的数据

完整代码如下：

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否为Firefox浏览器

// 开始拖拽
function drag(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if(isFF){
		// 需要携带拖拽的元素的id
		e.dataTransfer.setData("id",xxx);
	}else{
		// 可直接获取拖拽的元素
	}
}

// 结束拖拽
function dragEnd(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if(isFF){
		// 获取携带的拖拽元素的数据
		var dragEleId = e.dataTransfer.getData("id");
		// 再通过 dragEleId 进行获取拖拽的元素
	}
}

5、阻止事件冒泡的兼容写法

function(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
　　if(e.stopPropagation){
　　　　e.stopPropagation();
　　}else{
　　	e.cancelBubble = true;
　　}
}

6、阻止默认事件的兼容写法

function(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if(e.prevenDefault){
		e.preventDefault();
	}else{
		e.returnValue = false;
	}
}