在我们前端开发中,经常会遇到兼容性的问题,因为要考虑用户会使用不同的浏览器来访问你的页面,你要保证你做的网页在任何一个浏览器中都能正常的运行,下面我就举几个常用原生JS的兼容写法:
1:添加事件方法
addHandler：function(element,type,handler){
if(element.addEventListener){//检测是否为DOM2级方法
element.addEventListener(type, handler, false);
}else if (element.attachEvent){//检测是否为IE级方法
element.attachEvent("on" + type, handler);
} else {//检测是否为DOM0级方法
element["on" + type] = handler;
};
};
2:获取事件及事件对象目标
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
};
3:阻止浏览器默认事件的兼容性写法
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
};
};
4:阻止事件冒泡的兼容性写法
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
};
};
5:跨浏览器的方式取得字符编码
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
};
};
基本原生JS中兼容性问题我能想起来的也就这么多了,希望对大家的学习有帮助.
另外多加一个CSS3中兼容性写法
-webkit这个为浏览器的前缀代表浏览器的私有属性
-ms 这是IE浏览器的前缀
-moz 这代表了火狐浏览器的前缀
-o 这代表着欧朋浏览器
-webkit 这代表了谷歌浏览器和苹果浏览器
今天就先写到这里了,明天见!
坚持!坚持!坚持!坚持!坚持!