码迷,mamicode.com
首页 > Web开发 > 详细

常用原生JS兼容写法

时间:2017-06-12 23:56:06      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:comment   坚持   tac   事件冒泡   前端开发   keyword   getch   私有属性   comm   

在我们前端开发中,经常会遇到兼容性的问题,因为要考虑用户会使用不同的浏览器来访问你的页面,你要保证你做的网页在任何一个浏览器中都能正常的运行,下面我就举几个常用原生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  这代表了谷歌浏览器和苹果浏览器
今天就先写到这里了,明天见!
 
 
 
坚持!坚持!坚持!坚持!坚持!

常用原生JS兼容写法

标签:comment   坚持   tac   事件冒泡   前端开发   keyword   getch   私有属性   comm   

原文地址:http://www.cnblogs.com/May-J-Wang/p/6995288.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!