使用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=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=(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=null;
              if(cookieStart>-1){
                  var cookieEnd=document.cookie.indexof(";",cookieStart);
                  if(cookieEnd==-1){
                      cookieEnd=document.cookie.length;
                  }
                 cookieValue=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 浏览器兼容的一些方法的更多相关文章

  1. JS浏览器兼容问题

    一.JS与DOM的兼容性: (一) DOM节点的访问: 1.以前对DOM节点访问一般用“document.All.元素ID属性值”或者“document.元素ID属性值”这种简化的方法,在FireFo ...

  2. js 浏览器兼容css中webkit、Moz、O、ms...写法封装(es6语法)

    /** *浏览器兼容写法封装 */ let elementStyle = document.createElement('div').style let vendor = (() => { le ...

  3. js浏览器兼容

    //window.event   IE:有window.event对象   FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...

  4. js 浏览器兼容问题及解决办法

    JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题  我们都知道js通过style不可以获取行外样式,当我们需要获取行 ...

  5. IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包

    <!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.j ...

  6. scss、less 对浏览器兼容的处理方法, css 的单行溢出、多行溢出

    1. scss @mixin rounded($param1,$param2) {    #{$param1}:$param2;    -webkit-#{$param1}: $param2;     ...

  7. 浅谈CSS hack(浏览器兼容)

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  8. 关于浏览器兼容问题及hack写法

    浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...

  9. JS中常遇到的浏览器兼容问题和解决方法

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

随机推荐

  1. MVC中使用js拼接的元素验证问题

    MVC使用的验证方式本质上是jquery.validation js  拼接的格式如下: <input class='required' title='请输入项目名称!' id='Project ...

  2. Go! new Hello World, 我的第一个Go程序

    以下语句摘自百度百科: Go语言是谷歌2009发布的第二款开源编程语言. Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进 ...

  3. Hibernate映射一对一关联关系

    映射一对一关联 Hibernate提供了两种映射一对一关联关系的方式,分别是按照外键映射和按照主键映射. 下面是员工表和档案信息表(员工和档案表之间的关系是一对一的关系)  档案表(dept) pub ...

  4. 开源BTS产品中存在多处漏洞,攻击者或可劫持手机通讯基站

    前言 在过去的几周时间里,我从多个方面对GSM的安全性进行了调查和研究,例如GSM通信协议中存在的漏洞.除此之外,我还对目前世界上应用最为广泛的BTS软件进行了安全审计.在这篇文章中,我将会给大家介绍 ...

  5. iOS AVCaptureSession 小视频开发总结,支持设备旋转

    iOS开发中当我们想要自定义相机拍照或摄像界面时,UIImagePickerController无法满足我们的需求,这时候我们可以使用AVFoundation.framework这个framework ...

  6. iOS 截图功能

    步骤: 当我们所需截的图的大小超过我们屏幕的大小时,可以用UIScrollView作为底图,这样就可以截图我们所需的大小,即 UIScrollView *scrollView = self.view. ...

  7. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  8. 字符串数组转为PHP级数组

    先要把字符串处理一下,成为php定义数组的形式,再用eval执行: $str="Array([15] => Array([id] => 2304[fromtype] => ...

  9. ThinkPHP 自动验证相关注意

    1.假如加入了表单令牌的话,表单的各种名与对应Model字段一致,不然报坑爹的令牌错误. 2.假如加入了表单令牌的话,Create只能采用默认的POST数据创建数据对象,不然又是坑爹的令牌错误. 3. ...

  10. [GodLove]Wine93 Tarining Round #9

    比赛链接: http://vjudge.net/contest/view.action?cid=48069#overview 题目来源: lrj训练指南---二维几何计算   ID Title Pro ...