总结js中的一些兼容性易错的问题(2)

三、查询操作

查询通过指的是通过一些特征字符串来找到一组元素,或者判断元素是不是满足字符串。

1. IE6/7不区分id和name

在IE6/7下使用getElementById和getElementsByName时会同时返回id或name与给定值相同的元素。由于name通常由后端约定,因此我们在写JS时,应保证id不与name重复。

2. IE6/7不支持getElementsByClassName和querySelectorAll

这两个函数从IE8开始支持的,因此在IE6/7下,我们实际可以用的只有getElementByTagName。

3. IE6/7不支持getElementsByTagName('*')会返回非元素节点

要么不用*,要么自己写个函数过滤一下。

4. IE8下querySelectorAll对属性选择器不友好

几乎所有浏览器预定义的属性都有了问题,尽量使用自定义属性或者不用属性选择器。

5. IE8下querySelectorAll不支持伪类

有时候伪类是很好用,IE8并不支持,jquery提供的:first、:last、:even、:odd、:eq、:nth、:lt、:gt并不是伪类,我们在任何时间都不要使用它们。

6. IE9的matches函数不能处理不在DOM树上的元素

只要元素不在dom树上,一定会返回false,实在不行把元素丢在body里面匹配完了再删掉吧,当然了我们也可以自己写匹配函数以避免回流。

四. 事件操作

通常一问大家JS的兼容性,第一反应都会是attachEvent和addEventListener,但是关于这两个函数的区别,也还是有很多的细节。

1. 事件作用对象不同

addEventListener为事件冒泡到的当前对象,而attachEvent是window。

. 事件参数对象不同

一定要注意,attachEvent绑定的函数有参数e,不要再写e = e || event了,不过两者的参数属性有很多的差别,如button还是witch,支持不支持pageY等等。

2. 万恶的滚轮事件

滚轮事件的支持可谓是乱七八糟,规律如下:
IE6-11 chrome mousewheel wheelDetla 下 -120 上 120

firefox DOMMouseScroll detail 下3 上-3

firefox wheel detlaY 下3 上-3

IE9-11 wheel deltaY 下40 上-40

chrome wheel deltaY 下100 上-100

3. 三大不冒泡事件

所有浏览器的focus/blur事件都不冒泡,万幸的是大部分浏览器支持focusin/focusout事件,不过可恶的firefox连这个都不支持。

IE678下submit事件不冒泡。

IE678下change事件要等到blur时才触发。

而我们没有什么有效的手段去解决这三个问题,只能通过模拟触发的方式来处理。

4. a.click()

这方法在很多浏览器下都不安全,一执行哪怕阻止了默认行为,还是会造成页面跳转。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/40.html