2023年6月21日发(作者：)
Javascript不同浏览器差异和兼容⽅法浏览器兼容性是由多个不同浏览器同时存在导致的（浏览器内核、版本不同），这些浏览器在处理⼀个相同的页⾯时，表现有时会有差异，作为⼀个前端开发，处理兼容问题就成了我们必不可少的任务之⼀，下⾯将介绍⼀些处理JavaScript兼容性的⽅法。
1.
找⼦标签的问题问题描述: 1). childNodes, firstChild, lastChild会将两个标签之间的换⾏也当作⽂本节点 2). firstElementChild/lastElementChild在IE中只⽀持IE9及以上 3). children只包含所有的标签⼦节点, 在规范中没有, 但所有的浏览器都⽀持
解决办法: 1). 如果找⼦标签, 使⽤children 2). 如果找标签体⽂本, 使⽤innerHTML
2.
获取兄弟标签的问题问题描述 ementSibling/previousElementSibling, 对IE只⽀持IE9及以上 2. nextSibling/previousSibling : 返回是标签之间的换⾏⽂本节点
解决:var preEle = usSibling;if(pe === 3) {
//如果是⽂本节点类型, 再找上⼀个兄弟 preEle = usSibling;}
3. event问题描述: event对象创建好后, 浏览器处理的⽅式不相同 1). ⾮标准IE只是将event对象保存为window的属性 2). chrome除了保存, 还将event作⽤函数传给回调⽅法了 3). firfox只是将event作⽤函数传给回调⽅法了解决：event = event || ;// 或者简写如下ev = ev || event;
4.
滚动条坐标问题描述: 在获取当前的滚动坐标时, 不同的浏览器不⼀样 1). chrome: Top 2). 其它: Top 3). ⼀种浏览器只⽀持⼀种写法, 另⼀种写法返回0解决:var sTop =Top + Top//PS: scrollLeft值同理
5.
添加事件监听器的函数问题描述: 标准：ntListener(事件名称，事件函数，是否捕获); 1.有捕获 2.事件名称没有on 触发该事件的对象 IE：Event(事件名称，事件函数); 1.没有捕获 2.事件名称有on 指向window
解决:/* * 需求: 编写⼀个通⽤函数给指定UI对象设置指定的监听 */function bind (obj, eventName, fun) { if(ntListener) { ntListener(eventName, fun, false); } else { Event("on"+eventName, function() { (obj); }); }}
6.
取消事件的默认⾏为问题描述: 在操作⼀些页⾯元素时会导致⼀些默认⾏为 ⽐如: 点击转向链接, 滑动滚轮页⾯滚动
解决:function stopDefault(e) { // 阻⽌默认浏览器动作(W3C) if ( e && tDefault ) { tDefault(); } else { // IE中阻⽌函数器默认动作的⽅式 Value = false; } return false;}
7.
给元素添加滚轮滚动监听问题描述: 不同的浏览添加滚动监听的⽅式不⼀样ie/chrome : onmousewheel ⽤elta获取 上：120 下：-120firefox :DOMMouseScroll 必须⽤addEventListener 上：-3 下：3
解决如下:if(ewheel == undefined) { //firefox ntListener("DOMMouseScroll", fun, false);} else { //IE和chrome ewheel = fun;}
8. typeof
函数问题: ⾮标准IE中返回object解决: 函数 instanceof Function 看是否返回true
2023年6月21日发(作者：)
Javascript不同浏览器差异和兼容⽅法浏览器兼容性是由多个不同浏览器同时存在导致的（浏览器内核、版本不同），这些浏览器在处理⼀个相同的页⾯时，表现有时会有差异，作为⼀个前端开发，处理兼容问题就成了我们必不可少的任务之⼀，下⾯将介绍⼀些处理JavaScript兼容性的⽅法。
1.
找⼦标签的问题问题描述: 1). childNodes, firstChild, lastChild会将两个标签之间的换⾏也当作⽂本节点 2). firstElementChild/lastElementChild在IE中只⽀持IE9及以上 3). children只包含所有的标签⼦节点, 在规范中没有, 但所有的浏览器都⽀持
解决办法: 1). 如果找⼦标签, 使⽤children 2). 如果找标签体⽂本, 使⽤innerHTML
2.
获取兄弟标签的问题问题描述 ementSibling/previousElementSibling, 对IE只⽀持IE9及以上 2. nextSibling/previousSibling : 返回是标签之间的换⾏⽂本节点
解决:var preEle = usSibling;if(pe === 3) {
//如果是⽂本节点类型, 再找上⼀个兄弟 preEle = usSibling;}
3. event问题描述: event对象创建好后, 浏览器处理的⽅式不相同 1). ⾮标准IE只是将event对象保存为window的属性 2). chrome除了保存, 还将event作⽤函数传给回调⽅法了 3). firfox只是将event作⽤函数传给回调⽅法了解决：event = event || ;// 或者简写如下ev = ev || event;
4.
滚动条坐标问题描述: 在获取当前的滚动坐标时, 不同的浏览器不⼀样 1). chrome: Top 2). 其它: Top 3). ⼀种浏览器只⽀持⼀种写法, 另⼀种写法返回0解决:var sTop =Top + Top//PS: scrollLeft值同理
5.
添加事件监听器的函数问题描述: 标准：ntListener(事件名称，事件函数，是否捕获); 1.有捕获 2.事件名称没有on 触发该事件的对象 IE：Event(事件名称，事件函数); 1.没有捕获 2.事件名称有on 指向window
解决:/* * 需求: 编写⼀个通⽤函数给指定UI对象设置指定的监听 */function bind (obj, eventName, fun) { if(ntListener) { ntListener(eventName, fun, false); } else { Event("on"+eventName, function() { (obj); }); }}
6.
取消事件的默认⾏为问题描述: 在操作⼀些页⾯元素时会导致⼀些默认⾏为 ⽐如: 点击转向链接, 滑动滚轮页⾯滚动
解决:function stopDefault(e) { // 阻⽌默认浏览器动作(W3C) if ( e && tDefault ) { tDefault(); } else { // IE中阻⽌函数器默认动作的⽅式 Value = false; } return false;}
7.
给元素添加滚轮滚动监听问题描述: 不同的浏览添加滚动监听的⽅式不⼀样ie/chrome : onmousewheel ⽤elta获取 上：120 下：-120firefox :DOMMouseScroll 必须⽤addEventListener 上：-3 下：3
解决如下:if(ewheel == undefined) { //firefox ntListener("DOMMouseScroll", fun, false);} else { //IE和chrome ewheel = fun;}
8. typeof
函数问题: ⾮标准IE中返回object解决: 函数 instanceof Function 看是否返回true
发布评论