首页 > 代码库 > js 浏览器兼容的一些方法

js 浏览器兼容的一些方法

2024-10-30 02:41:02   210人阅读

使用js是一件令人很抓狂的事情，很多的浏览器兼容，一大推的代码，谁的脑袋能记住那么多的东西，只有平时多积累，所谓熟能生巧嘛。。这里列出一些常用的兼容代码，一点点积累哈~~~
   
一、以跨浏览器的方式处理事件。这个叫EventUtil对象定义了一些方法，用来处理各浏览器之间的差异。
    
     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]=null;
             }
         },
    
         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;
             }
         },
        
         getEvent:function(event){//获取event对象
             return event:event?window.event;
         },
 
         getTarget:function(event){//获取事件目标
             return event.target||event.srcElement;
         },
 
         preventDefault:function(event){//阻止默认事件
             if(event.preventDefault){
                  event.preventDefault();
             }else{
                  event.returnValue=http://www.mamicode.com/flase;
             }
         },
 
         stopPropagation:function(event){//阻止冒泡事件
             if(event.stopPropagation){
                  event.stopPropagation();
             }else{
                  event.cancelBubble=true;
             }
         },
 
         getRelatedTarget:function(event){//mouseover,mouseout通过event提供相关元素信息
             if(event.relatedTarget){
                 return event.relatedTarget;
             }else if(event.toElement){
                 return event.toElement;
             }else if(event.fromElement){
                 return event.fromElement;
             }else{
                 return null;
             }
         },
 
         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){//键盘按下键的ascii值码
             if(typeof event.charCode=="number"){
                  return event.charCode;
             }else{
                  return event.keyCode;
             }
         },
 
         //clipboardData 剪贴板对象，firefox不支持该对象
         getClipboardData:function(event){//获取剪贴板数据
              var clipboardData=http://www.mamicode.com/(event.clipboardData||window.clipboardData);
              return clipboardData.getData("text");
         },
        
         setClipboardData:function(event,value){
              if(event.clipboardData){
                  return event.clipboardData.setData("text/plain",value);
              }else if(window.clipboardData){
                  return window.clipboardData.setData("text",value);
              }
         },
     }
 
 
二、对表单的操作兼容的一些函数：
1、取得用户在文本框取得的文本：
      function getSelectedText(textbox){
           if(document.selection){//ie
                return document.selection.creatRange().text;
           }else{
                return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
           }
      }
 
2、选择部分文本：
      function selectText(textbox,startIndex,stopIndex){
           if(textbox.setSelectionRange){
                 textbox.setSelectionRange(startIndex,stopIndex);
           }else if(textbox.createTextRange){//ie
                 var range=textbox.createTextRange();
                 range.collapse(true);
                 range.moveStart(‘character‘,startIndex);
                 range.moveEnd(‘character‘,stopIndex-startIndex);
                 range.select();
           }
           textbox.focus();
      }
 
三、一些常用的js自定义函数。
1、下面这个函数可以辅助向现有的URL的末尾添加查询字符串参数，查询字符串中的每个名称和值都应该用encodeURIComponent()进行编码，不然容易发生请求错误：
      function addURLParam(url,name,value){
           url+=(url.indexof(‘?‘)==-1?"?":"&");
           url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
           return url;
      }
 
2、设置和获取cookie:
      var CookieUtil={
          get:function(name){
              var cookieName=encodeURIComponent(name)+"=",
                  cookieStart=document.cookie.indexof(cookieNmae);
                  cookieValue=http://www.mamicode.com/null;
              if(cookieStart>-1){
                  var cookieEnd=document.cookie.indexof(";",cookieStart);
                  if(cookieEnd==-1){
                      cookieEnd=document.cookie.length;
                  }
                 cookieValue=http://www.mamicode.com/decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
              }
              return cookieValue;
          },
         
          set:function(name,value,expires,path,domain,secure){
              var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);
              if(expires instanceof Date){
                   cookieText+=";expires="+expires.toGMTString();
              }
              if(path){
                   cookieText+=";path="+path;
              }
              if(domain){
                   cookieText+=";domain="+domain;
              }
              if(secure){
                   cookieText+=";secure="+secure;
              }
              return cookieText;
          }
          unset:function(name,path,domain,secure){
              this.set(name,"",new Date(0),path,domain,secure);
          }
      }
 

js 浏览器兼容的一些方法


联系
我们