经常使用原生JS兼容写法

时间 2019-11-22

标签经常使用原生兼容写法栏目 JavaScript 繁體版

原文原文链接

在咱们前端开发中,常常会遇到兼容性的问题,由于要考虑用户会使用不一样的浏览器来访问你的页面,你要保证你作的网页在任何一个浏览器中都能正常的运行,下面我就举几个经常使用原生JS的兼容写法:前端

1:添加事件方法web

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  这表明了谷歌浏览器和苹果浏览器 
    
      今天就先写到这里了,明天见! 
    
      坚持!坚持!坚持!坚持!坚持!