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;
}
}