在javascript中常见的浏览器兼容问题,以及解决方式。
在前端工作当中我们遵循这样的原则:渐进增强和优雅降级
 
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
 
优雅降级(graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
 
 
1、获取非行内样式:
        函数getStyle(e,attr)第一个参数为需要获取样式的元素对象,第二个参数为样式的属性名(可以是一个对象数组)
        style 只能获取行内style,
        调用方式obj.style.属性
        兼容:所有都支持
 
        currentStyle() 可以获取该obj所有style,但是只可以读取,不可以设置
        调用方式:obj.currentStyle["属性"] 或者obj.currentStyle.属性
        兼容:只兼容ie6以上,不兼容其他浏览器
        getComputedStyle() 可以获取该obj所有style,只可以获取不能设置
        调用方式getComputedStyle(obj,null)[属性]或者getComputedStyle(obj,null).属性;
        兼容:兼容其他浏览器,IE浏览器只兼容ie9以上,
 
 
获取非行内样式兼容写法:
function getStyle(ele,attr){
    if(ele.currentStyle){
            return ele.currentStyle[attr] ;        //IE使用
    }else{
            return ele.getComputedStyle[attr];        //moz等其他浏览器使用
    }
}
 
 
2、事件冒泡与默认事件的兼容及方法说明:
 
阻止事件冒泡:
    阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,所以一般配合默认事件一起使用。
 
e.stopPropagation()方法,取消事件冒泡对当前节点无影响
    符合w3c标准,适合谷歌火狐等浏览器,仅支持IE9以上版本
    
兼容IE事件对象:
    cancelBubble()返回的是一个布尔值,放在if语句里面判断 取消事件冒泡
       不符合W3C标准,只支持IE浏览器。
        从Chrome 58和Opera 45开始,谷歌和欧朋将此属性设置为false无效。
阻止事件冒泡兼容写法
function stopBubble(e){
    //判断浏览器
    if(e.stopPropagation){
        e.stopPropagation();                //moz等浏览器执行
    }else{
    //不是的话,使用cancelBubble方法
        e.cancelBubble = turn;              //IE浏览器使用 
}
 
阻止默认事件:
 
阻止右键菜单,阻止ctrl+c,阻止表单提交
        阻止默认事件的方法,调用此方法,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
 
e.preventDefault() 
       兼容主流浏览器,兼容ie9以上浏览器
 
e.returnValue 
返回的是布尔值,在IE6以上浏览器可以兼容,在火狐浏览器中不支持
 
阻止默认事件的兼容写法
function stopDefault(e){
    if(e.preventDefault){        //moz等浏览器执行
            e.preventDefault()        
}else{
      e.returnValue = false;        //IE下执行
 
}
 
return false方式阻止冒泡和默认事件
会同时阻止事件冒泡和默认事件,相当于同时调用了event.stopPropagation()和event.preventDefault()
 
 
 
3、事件获取兼容
 
//IE是把event事件对象作为全局对象window的一个属性;可以使用event或window.event来访问;
//FireFox和Chrome等主流浏览器是通过把【事件对象】作为【事件响应函数】的【参数】进入传入的;
//兼容性的写法示例:
 
domElement.onclick = function( e ){
     var  e = e || window.event;    //或(||)书写顺序有讲究,不能随意换
}
 
事件获取兼容的三元表达式写法:
var  e = event ? event : event:window.event;
  
window.event
   
事件源的获取的兼容(事件委托机制)
e.target
e.srcElement
IE浏览器下没有target属性,只有srcElement属性,
FF浏览器则和IE浏览器相反
chrome下同时兼容两个方法
function foo(event){
    var evt = window.event||event;
    var targetObj = evt.target||evt.srcElement;
}
 
事件源的获取三元表达式写法:
    var targetobj = event.srcElement? event.srcElement : event.target;
 
 
4.事件绑定方式的兼容
 
DOM绑定事件
0级绑定事件
    // obox.onclick = function(){}
    删除事件
    element.onclick = null;
 
2级事件绑定(监听式事件绑定)
    2级事件绑定:可以重复绑定多个事件,但是存在兼容问题
    
    在IE浏览器中兼容:
    添加事件:obj.attachEvent(event,function)
    删除事件:obj.detachEvent(event,function)
    微软私有方法,火狐和其他浏览器不支持在IE浏览器中只有冒泡阶段,事件名需要加on;
    
    在其他浏览器兼容:
    添加事件:obj.addEventListener(type,listener,useCapture)
        type:事件的类型比如"click","mouseover"等等。
        listener:回调函数
         useCapture:用来确定是冒泡还是捕获,默认值是false,当为ture时是冒泡传递
     删除事件:obj.removeEventListener(type,listener)   
                type:需要删除的事件(事件句柄)
                listener:回调函数
 
事件绑定方式的兼容函数的封装
    function addEvent(obj,inci,back){
        if(obj.addEventListener){
            obj.addEventListener(inci,back);
        }else if(obj.attachEvent){
            obj.attachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = back;
        }
    }
          
    function removeEvent(obj,inci,back){
        if(obj.removeEventListener){
            obj.removeEventListener(inci,back,false);
        }else if(obj.detachEvent){
            obj.detachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = null;
        }
    }
 
 
5.其他一些兼容问题:
    
    滚动条兼容问题解决:
     document.documentElement.scrollTop||document.body.scrollTop
 
      网页可视区域兼容  
        window.innerHeight || document.documentElement.clientHeight
        window.innerWidth || document.documentElement.clientWidth
        
欢迎大家补充,以及错误指正。        
 
        

在javascript中的浏览器兼容问题以及兼容浏览器汇总(默认事件,阻止冒泡,事件监听。。。)以及解决方式详解的更多相关文章

  1. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

  2. JQuery阻止冒泡事件on绑定中异常情况分析

    科普下事件冒泡以及默认行为,以下面例子举列子:     事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...

  3. DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

  4. JavaScript 各种遍历方式详解及总结

    JavaScript 各种遍历方式详解 在$.each中想要终止循环,但是它没有continue或者break这样的终止方式,所以尝试使用return来进行终止,但是发现并没有跳出循环.为了搞清楚js ...

  5. WPF中的事件及冒泡事件和隧道事件(预览事件)的区别

    WPF快速指导10:WPF中的事件及冒泡事件和隧道事件(预览事件)的区别   WPF快速指导10:WPF中的事件及冒泡事件和隧道事件(预览事件)的区别 本文摘要: 1:什么是路由事件: 2:中断事件路 ...

  6. JAVA中的四种JSON解析方式详解

    JAVA中的四种JSON解析方式详解 我们在日常开发中少不了和JSON数据打交道,那么我们来看看JAVA中常用的JSON解析方式. 1.JSON官方 脱离框架使用 2.GSON 3.FastJSON ...

  7. WPF中的事件及冒泡事件和隧道事件的区别

    WPF中的事件及冒泡事件和隧道事件的区别 冒泡事件表示事件从元素树向上到达根元素.这样您就可以在源元素的上方层级对象处理事件.例如,您可向嵌入的 Grid 元素附加一个 Button.Click 处理 ...

  8. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  9. 「JavaScript」四种跨域方式详解

    超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...

随机推荐

  1. 对JAVA Bean使用PropertyDescriptor反射调用JAVA方法低耦合

    对于符合JAVA Bean规范的bean,调用其方法应优先使用java.beans.PropertyDescriptor获取Method进行方法调用,以获得更大的可维护性. public void g ...

  2. Spring条件注解@Conditional

    @Conditional是Spring4新提供的注解,它的作用是根据某个条件创建特定的Bean,通过实现Condition接口,并重写matches接口来构造判断条件.总的来说,就是根据特定条件来控制 ...

  3. 堆排序(实现c++)

    堆可以看作是一个完全二叉树,分为大顶堆和小顶堆,本文我们以大顶堆为例来实现堆排序. (1)建堆 先把给定的序列转换成一棵完全二叉树,然后逐步对其调整使其每个结点的值都大于其两个子结点的值,因此我们需要 ...

  4. python多线程与多进程及其区别

    个人一直觉得对学习任何知识而言,概念是相当重要的.掌握了概念和原理,细节可以留给实践去推敲.掌握的关键在于理解,通过具体的实例和实际操作来感性的体会概念和原理可以起到很好的效果.本文通过一些具体的例子 ...

  5. 如何思考博弈dp

    两个人的规则是否一致 若仅仅是先后的差别 我们可用dp解决一般思考一个子状态 对于当前的那个状态 我们进行什么样的操作 已知什么

  6. linux学习总结--linux100day(day2)

    Linux中的哲学--一切皆文件 为了便于操作,我们可以使用secureCRT或Xshell连接到我们的虚拟机. 要用远程工具连接到虚拟机上,我们只需要打开虚拟机上的ssh服务,在xshell中填写主 ...

  7. SIMBOSS:物联网业务如何应用领域驱动设计?

    前言 在这个万物互联的时代,物联网业务蓬勃发展,但也瞬息万变,对于开发人员来说,这是一种挑战,但也是一种“折磨”. 在业务发展初期,因为时间有限,我们一般会遵循“小步快跑,迭代试错”的原则进行业务开发 ...

  8. Springboot源码分析之项目结构

    Springboot源码分析之项目结构 摘要: 无论是从IDEA还是其他的SDS开发工具亦或是https://start.spring.io/ 进行解压,我们都会得到同样的一个pom.xml文件 4. ...

  9. Java String引起的常量池、String类型传参、“==”、“equals”、“hashCode”问题 细节分析

    在学习javase的过程中,总是会遇到关于String的各种细节问题,而这些问题往往会出现在Java攻城狮面试中,今天想写一篇随笔,简单记录下我的一些想法.话不多说,直接进入正题. 1.String常 ...

  10. [HAOI2015]树上染色(树上dp)

    [HAOI2015]树上染色 这种要算点对之间路径的长度和的题,难以统计每个点的贡献.这个时候一般考虑算每一条边贡献了哪些点对. 知道这个套路以后,那么这题就很好做了. 状态:设\(dp[u][i]\ ...