常用原生JS兼容写法

Posted 2020-09-22

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

今天就先写到这里了,明天见!

 

 

 

坚持!坚持!坚持!坚持!坚持!