跨IE6、7、IE8与各浏览器常用兼容js
2018-03-05 本文已影响0人
fire_inTheHole
IE的独有方法和像chrom、firefox等浏览器不兼容，下列是摘抄自《javascript高级程序设计》的第3版的兼容js，方便大家使用
EventUtil.js
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getButton: function(event){
if (document.implementation.hasFeature("MouseEvents", "2.0")){
return event.button;
} else {
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4: return 1;
}
}
},
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
},
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
getEvent: function(event){
return event ? event : window.event;
},
getRelatedTarget: function(event){
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
},
getTarget: function(event){
return event.target || event.srcElement;
},
getWheelDelta: function(event){
if (event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
setClipboardText: function(event, value){
if (event.clipboardData){
event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
window.clipboardData.setData("text", value);
}
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
下列是使用示例，添加单击按钮的js
<!DOCTYPE html>
<html>
<head>
<title>Cross-Browser Event Handler Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<input type="button" id="myBtn" value="Click Me" />
<input type="button" id="myRemoveBtn" value="Remove Event Handler" />
<script type="text/javascript">
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
var removeBtn = document.getElementById("myRemoveBtn");
EventUtil.addHandler(removeBtn, "click", function(){
EventUtil.removeHandler(btn, "click", handler);
});
</script>
</body>
</html>
阻止a链接等默认事件跳转示例
<!DOCTYPE html>
<html>
<head>
<title>Cross-Browser Event Object Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<a href="http://www.nczonline.net/" id="myLink">Click Me</a>
<p>This link will not navigate when clicked.</p>
<script type="text/javascript">
var link = document.getElementById("myLink");
link.onclick = function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};
</script>
</body>
</html>
防止冒泡示例
<!DOCTYPE html>
<html>
<head>
<title>Cross-Browser Event Object Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<input type="button" value="Click Me" id="myBtn" />
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert("Clicked");
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
document.body.onclick = function(event){
alert("Body clicked");
};
</script>
</body>
</html>
