2023年6月21日发(作者：)
JS兼容性问题汇总（主要针对IE）今天来总结⼀下JS的兼容问题和相关的解决⽅法。这⾥⽼规矩，吐槽⼀下万恶之源IE！！1、事件绑定的兼容问题。这⾥先回顾⼀下事件绑定的⽅式，有DOM0级和DOM2级，DOM0级没有兼容性问题，但是缺点也很多，⽐如不可以在多次绑定同⼀个事件，后绑定的时间会将先绑定的事件覆盖！！DOM2级绑定⽅式⽀持⼤多数⾼级浏览器。但是IE8及以下浏览器不⽀持DOM2级绑定⽅式，它有⾃⼰的绑定⽅法：attachEvent。这时绑定事件就需要考虑浏览器的兼容性问题了，下边贴出完美解决兼容性问题的代码：//三个形参分别表⽰绑定事件的元素，事件类型和事件函数 function bindEvent(dom, type, handler) { if (ntListener) { ("⾼级浏览器执⾏该代码") ntListener(type, handler, false); } else if (Event) { ("⾼级IE浏览器执⾏该代码") Event("on" + type, handler); } else { ("其它浏览器使⽤DOM0级绑定⽅式。") var t = "on" + type; dom[t] = handler; } bindEvent(box, "mousedown", function() {
}); }2、事件本⾝的兼容性问题。我们在需要使⽤⿏标坐标等信息时，需要⽤到event，在⾼级浏览器中会主动传递该参数，但是在IE8及以下浏览器中，将event放在了属性下，此时⽤短路语法即可轻松解决。以下为代码 var event = event || ; event 是浏览器收集到的触发事件时的信息组成的对象
顺带⼀提，IE中没有和这两个属性。3、获取页⾯滚动值scrollTop的兼容问题。⼀些浏览器将scrollTop绑定在body上，还有⼀些绑定在HTML上，解决办法：var scrollTop = Top || 4、获取CSS样式的兼容性问题。⾼级浏览器的⽅法为getComputedStyle，IE中为currentStyle。解决⽅法：//第⼀个形参为要获取样式的元素，第⼆个为要获取元素的样式 function getCss(ele, cssName) { //能⼒检测
检测是否具备getComputedStyle⽅法 if (putedStyle) { //如果有
就调⽤并得到ele这个元素的css样式对象（属性） var cssObj = getComputedStyle(ele); //返回对应的属性 return cssObj[cssName]; } else { //如果没有
通过currentStyle属性获取css样式对象 var cssObj = tStyle; //返回对应的属性 return cssObj[cssName]; }5、⽬标精确元素的兼容性问题，在⾼级浏览器中触发事件的元素为,在IE中为ment。也是使⽤短路语法就可以啦！6、停⽌事件冒泡的兼容性问题。在⾼级浏览器中为opagation()。在IE中为 Bubble = true;暂时想到的就这么多啦！有错误的地⽅还请各位⼤侠指出！！
2023年6月21日发(作者：)
JS兼容性问题汇总（主要针对IE）今天来总结⼀下JS的兼容问题和相关的解决⽅法。这⾥⽼规矩，吐槽⼀下万恶之源IE！！1、事件绑定的兼容问题。这⾥先回顾⼀下事件绑定的⽅式，有DOM0级和DOM2级，DOM0级没有兼容性问题，但是缺点也很多，⽐如不可以在多次绑定同⼀个事件，后绑定的时间会将先绑定的事件覆盖！！DOM2级绑定⽅式⽀持⼤多数⾼级浏览器。但是IE8及以下浏览器不⽀持DOM2级绑定⽅式，它有⾃⼰的绑定⽅法：attachEvent。这时绑定事件就需要考虑浏览器的兼容性问题了，下边贴出完美解决兼容性问题的代码：//三个形参分别表⽰绑定事件的元素，事件类型和事件函数 function bindEvent(dom, type, handler) { if (ntListener) { ("⾼级浏览器执⾏该代码") ntListener(type, handler, false); } else if (Event) { ("⾼级IE浏览器执⾏该代码") Event("on" + type, handler); } else { ("其它浏览器使⽤DOM0级绑定⽅式。") var t = "on" + type; dom[t] = handler; } bindEvent(box, "mousedown", function() {
}); }2、事件本⾝的兼容性问题。我们在需要使⽤⿏标坐标等信息时，需要⽤到event，在⾼级浏览器中会主动传递该参数，但是在IE8及以下浏览器中，将event放在了属性下，此时⽤短路语法即可轻松解决。以下为代码 var event = event || ; event 是浏览器收集到的触发事件时的信息组成的对象
顺带⼀提，IE中没有和这两个属性。3、获取页⾯滚动值scrollTop的兼容问题。⼀些浏览器将scrollTop绑定在body上，还有⼀些绑定在HTML上，解决办法：var scrollTop = Top || 4、获取CSS样式的兼容性问题。⾼级浏览器的⽅法为getComputedStyle，IE中为currentStyle。解决⽅法：//第⼀个形参为要获取样式的元素，第⼆个为要获取元素的样式 function getCss(ele, cssName) { //能⼒检测
检测是否具备getComputedStyle⽅法 if (putedStyle) { //如果有
就调⽤并得到ele这个元素的css样式对象（属性） var cssObj = getComputedStyle(ele); //返回对应的属性 return cssObj[cssName]; } else { //如果没有
通过currentStyle属性获取css样式对象 var cssObj = tStyle; //返回对应的属性 return cssObj[cssName]; }5、⽬标精确元素的兼容性问题，在⾼级浏览器中触发事件的元素为,在IE中为ment。也是使⽤短路语法就可以啦！6、停⽌事件冒泡的兼容性问题。在⾼级浏览器中为opagation()。在IE中为 Bubble = true;暂时想到的就这么多啦！有错误的地⽅还请各位⼤侠指出！！
发布评论