javascript之IE兼容篇

青旅半醒 2023-07-14 10:40 5阅读 0赞

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

持续更新~欢迎补充~