javascript之IE兼容篇

前端开发等需求明确说明需要兼容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');

持续更新~欢迎补充~