使用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. [make]makefile使用积累

    [注]:文中所指手册皆为GNU make Version 4.1 1.make的一般特性 1.1.Makefiles的构成 Makefiles包含五种元素: 显式规则(explicit rules), ...

  2. 如何修复Outlook 2007源文件.PST及性能优化补丁

    kb961752 微软发布了改善 Outlook 2007 个人数据文件性能的补丁,该补丁未来将会集成于 SP2 中,但是现在对于SP1用户可以提前得到它.   获取地址: http://suppor ...

  3. 用Python获取沪深两市上市公司股票信息,提取创近10天股价新高的、停牌的、复牌不超过一天或者新发行的股票,并存入mysql数据库

    #该脚本可以提取沪深两市上市公司股票信息,并按以下信息分类:(1)当天股价创近10个交易日新高的股票:(2)停牌的股票:(3)复牌不超过一个交易日或者新发行的股票 #将分类后的股票及其信息(股价新高. ...

  4. C#编程:SqlCommand.Parameters.Add()方法的参数问题。

    在存储过程中添加2个参数 sql语句 例: “update [tablename] username = @username where id=@id” 然后把需要的 command.Paramete ...

  5. Lucky 2048 - The secret of being lucky

    Lucky 2048 uses a normal distribution to create "lucky" start. Generally speaking, it prov ...

  6. 本地mysql数据库root密码丢失修改方法

      1,停止数据库 2,cd /etc/mysql 3,利用vim命令打开mysql配置文件my.cnf,在mysqld进程配置文件中添加skip-grant-tables,添加完成后,执行wd保存. ...

  7. 长时间停留在calculating requirements and dependencies 的解决方案

    如果Eclipse花费了很长的时间calculating requirements and dependencies(计算需求和依赖性 ) 这个问题通常就是在点击安装之后显示“Calculating ...

  8. ccs3

    [ 布局 Layout] display:none | intel |block | list-item | inline-block| [ 取值:] onne:隐藏对象.与visibility属性的 ...

  9. 绝不在构造和析构函数中调用 virtual 函数

    看下面的这段代码,问 print调用的是基类还是派生类的版本? 答案是 基类... 可能大家会很惊讶,print不是virtual function 吗?为什么不是调用派生类的版本呢? 首先,当定义一 ...

  10. RABBITMQ(小总结 持续更新...

    (一)理解消息通信 1.消息通信概念---消费者.生产者和代理 生产者(producer)创建消息,然后发送到代理服务器(RaabitMQ). 其中消息包括两部分内容:有效载荷(payload)和标签 ...