前端开发等需求明确说明需要兼容IE时,我们才发现IE真的很恶心,不管是html5与css3的支持情况还是js需要做的兼容写法,都是令我们作呕的。但是身为开发人员,需求下来了又不能不管。只能往前冲,所以笔者今天就写了这边笔者自己的小总结博客。希望能在你开发项目兼容IE时有所帮助!
// 获取浏览器可视窗口的宽度与高度:
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 获取事件源元素:
// 备注:event是事件函数的参数。
const event = event || window.event;
const target = event.srcElement || event.target;
// 请注意:下方的处理都默认event已经按照上面的写法兼容过衍生的
// 阻止事件冒泡和浏览器默认行为
event.preventDefault
? event.preventDefault()
: event.returnValue = false;
// 只阻止事件冒泡
event.stopPropagation
? event.stopPropagation();
: event.cancelBubble = true;
// 注册和解除事件监听器的兼容写法
const EventListen = {
addEvent(ele,fn,str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
if(ele.addEventListener){ //火狐谷歌IE9+支持addEventListener
//直接调用
ele.addEventListener(str,fn);
}else if(ele.attachEvent){ //IE678支持attachEvent
ele.attachEvent("on"+str,fn);
}else{
//在addEventListener和attachEvent都不存在的情况下,用此代码
ele["on"+str] = fn;
}
},
removeEvent (ele,fn,str) {
if(ele.removeEventListener){
ele.removeEventListener(str,fn);
}else if(ele.detachEvent){
ele.detachEvent("on"+str,fn);
}else{
ele["on"+str] = null;
}
}
};
EventListen.addEvent(element, function() {}, 'click');
持续更新~欢迎补充~