JS解决浏览器一些兼容问题

在开发的过程中,我们就经常会遇到浏览器的兼容问题,因为我们不知道用户是用什么版本的浏览器,对于不同的浏览器,对一些不同的样式或者事件,不同的浏览器支持度页不一样,那么我们今天来总结一部分常见的浏览器兼容事件吧。

一、事件绑定中的addEventListener()方法

1、浏览器支持:

支持该方法的第一个浏览器的版本号

支持的浏览器.png

Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持,但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件

2、语法

element.addEventListener(event, function, useCapture)

参数说明:
event :必须,字符串,指定事件名,不要使用“on”前缀
function:必须,事件触发时执行的函数
useCapture: 可选,布尔值,指定事件是否在捕获或者冒泡阶段执行;true:在捕获阶段执行;false:默认,在冒泡阶段执行

3、兼容性写法

我们通过判断浏览器是否支持addEventListener函数或者attachEvent函数来执行对应的语句

//参数说明:
//element:需要操作的对象
//type:需要绑定的事件名
//fn:事件触发时执行的函数
function addEvent(element, type, fn){
    if(element.addEventListener){
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);  
    }else{
        element["on"+type]=fn;
    }
}

二、解除事件绑定的removeEventListener()方法

1、浏览器支持

支持该方法的第一个浏览器的版本号


支持的浏览器.png

Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 detachEvent() 方法来移除由 attachEvent() 方法添加的事件。

2、语法

element.removeEventListener(event, function, useCapture)

参数说明:
event:必须,要移除的事件名称,不要加“on”前缀
function:必须,指定要移除的函数
useCapture:可选,布尔值。指定移除事件是否在捕获或者冒泡阶段执行;true:在捕获阶段执行;false:默认,在冒泡阶段执行。

3、兼容性写法

我们通过判断浏览器是否支持removeEventListener函数或者detachEvent函数来执行对应的语句

//参数说明:
//element:需要操作的对象
//type:需要解除绑定的事件名
//fn:事件触发时移除的函数
function removeEvent(element,type,fn){
    if(element.removeEventListener){
          console.log(element.removeEventListener, element, type, fn)
          element.removeEventListener(type,fn,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,fn);
    }else{
        element["on"+type]=null;
    }
}

三、滚轮事件addMousewhel()

1、浏览器支持

这里不是区分IE8派和其他派,而是区分Firefox派和其他派,Firefox浏览器一个人使用DOMMouseScroll,其他包括IE6在内的浏览器使用onmousewheel
  那么我们想想想滚动滚轮的时候,还有什么是我们遇到问题呢?
(1)、鼠标滚轮是向上滚动还是向下滚动呢?
(2)、鼠标滚轮滚动的幅度大小是多少呢?
还好,我们可以通过event的某些属性值得到这些信息
(1)“mousewheel”事件中的“event.wheelDelta”属性值,如果返回值是正值说明滚轮是向上滚动,如果是负值说明滚轮是向下滚动,返回的值是120的倍数,即幅度大小 = 返回值/120 ;
(2)“DOMMouseScroll”事件中“event.datail”属性值:如果返回值是正值说明滚轮是向下滚动,如果是负值说明是向上滚动(与 “event.wheelDelta” 正好相反),幅度大小 = 返回值;

2、兼容性写法

我们只需要根据navigator.userAgent.indexOf("Firefox")判断浏览器类型是否是Firefox,是就用DOMMouseScroll,不是就用mousewheel语句

//参数说明:
element: 是绑定滚轮事件的元素
fn:是滚轮事件触发执行的函数
function addMousewheel(element,fn){
    if(navigator.userAgent.indexOf("Firefox")!=-1){
        element.addEventListener("DOMMouseScroll",fn,false);
    }else{
        element.onmousewheel = fn;
    }
}

以上是对滚轮事件的兼容性封装函数,那么我们在调用这个函数的时候,还需要在在参数fn的函数里面来统一滚轮的方向和幅度,即:

addMousewheel(div,function(ev){
    var detail = -ev.detail || ev.wheelDelta/120;
})

这样统一后,我们不管在哪个浏览器触发滚轮事件,其滚轮方向和滚动幅度都是一致的

四、获取样式兼容函数getComputedStyle()

1、浏览器支持

除了IE6-8浏览器不支持getComputedStyle()方法,其他主流浏览器都支持这个方法,IE浏览器有自己的一套获取样式的属性currentStyle()。

2、getComputedStyle与style、currentStyle的区别
(1)首先我们来了解一下element.style属性(可读可写)

element.style属性返回一个CSSStyleDeclaration对象,表示元素的内联style属性,既然它返回的是一个对象,那我们就不能通过直接给styles属性设置字符串(如:element.style = "color:blue")来设置style,因为它返回的对象时只读的,但style本身还有属性可以用来设置样式(比如:ele.style.color = "blue")
  那我们要了解元素样式的信息,仅仅使用style属性是不够的,这是因为它只包含了在元素内联style属性上声明的CSS属性,而不包括来自其他地方声明的样式,那么这时候我们需要使用window.getComputedStyle()来获取属性

(2)window.getComputedStyle()(仅可读)

getComputedStyle方法获取的是应用在元素上的所有的CSS属性(包括所有的默认样式),但是这种方法是IE6-8不支持的

(3)currentStyle

currentStyle是IE浏览器自娱自乐的一个属性,element.currrentStyle返回的是元素当前应用的最终CSS属性值(包括外联CSS文件,页面中嵌入的<style>属性等)。

那我们在不知道用户用什么浏览的情况下,我们该怎么准确无误的获取元素的CSS样式呢?下面我们来封装一个获取样式兼容函数

3、兼容性写法

我们只需判断浏览器是否支持getComputedStyle()方法,就能判断用户使用是否是IE6—8浏览器

function getStyle(obj,styleName){
    if(window.getComputedStyle){
        var styles = getComputedStyle(obj,null)[styleName];
    }else{
        var styles = obj.currentStyle[styleName];
    }
    return styles;
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • 一、DOM 什么是DOM?Document Object Model(文档对象模型)。DOM是针对HTML和XML...
    空谷悠阅读 962评论 0 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,787评论 25 707
  • 因为之前的项目导入未完成即停止下载代码,同时将文件删除。导致更新出现问题。 此处提示:cleanup svn 。 ...
    沉默的雨阅读 594评论 0 0
  • 不知道什么时候开始,就算想起了你,都已经不是哪个在我童年的时候,骂我骂到我哭。打我打到我说下次不敢了。 不知道什么...
    太执著阅读 296评论 0 1
  • 亲爱的PP: 这几天上午真的很开心,能够送你上班,跟你在一起,一路聊过来。你愿给我一个微笑,我便想还你一个世界...
    TT孔雀鱼阅读 264评论 0 1