javascript常见兼容问题汇总js(主要针对IE)

2020-05-01 22:57:04 阅读：241 来源： 互联网

标签：box function 兼容问题 javascript js 事件 isCapture var ele

js中有很多兼容问题，今天先来讨论一些常用的关于低版本IE的兼容。（基本上都是为了兼容IE8一下的）

一、事件对象的兼容问题（event）

比如想要获取鼠标坐标时候需用到event，在高级浏览器中会主动传递该参数，但是在IE8及以下浏览器中，将event放在了window.event属性下，此时用逻辑短路即可轻松解决

btn.onclick=function(ev){
   var e=ev||window.event;
   console.log(e);
}

二、事件监听绑定和移除的兼容问题（绑定：addEventListener和IE：attachEvent，移除：removeEventListener和IE：detachchEvent）

事件绑定的方式分为两种DOM0级和DOM2级，DOM0级没有兼容性问题，但是不能同时绑定多个事件因为会覆盖，DOM2是事件监听绑定事件可以同时绑定多个事件不会覆盖但是IE8一下却不支持，它有自己的绑定方式：attachEvent，这时候就要考虑兼容了。
我们可以封装一个兼容写法添加事件监听和移除事件监听的方法：

/**
 * 添加事件监听
 * @param  ele         <DOMobject> 添加事件的DOM元素
 * @param type         <string>    事件类型（不带on）
 * @param  fn          <function>  事件处理函数
 * @param [isCapture]  <boolean>可选参数，是否捕获， true代表捕获，false代表冒泡，默认为false
 */

function on(ele,type,fn,isCapture){
    if(isCapture===undefined)isCapture=false;
    if(ele.attachEvent){
        ele.attachEvent("on"+type,fn);
    }else{
        ele.addEventListener(type,fn,isCapture)
    }
}

/**
 * 移除事件监听
 * @param  ele         <DOMobject> 添加事件的DOM元素
 * @param type         <string>    事件类型（不带on）
 * @param  fn          <function>  事件处理函数
 * @param [isCapture]  <boolean>可选参数，是否捕获， true代表捕获，false代表冒泡，默认为false
 */
function off(ele,type,fn,isCapture){
    if(isCapture===undefined)isCapture=false;
    if(ele.detachchEvent){
        ele.detachchEvent("on"+type,fn);
    }else{
        ele.removeEventListener(type,fn,isCapture)
    }
}

//使用方法
<button id="btn">取消box事件</button>
<div id="box">box</div>
<script src="utils.js"></script>
<script>
    //上面引入了外部封装好的添加和移除监听方法在utils.js中
     var btn=document.querySelector("#btn");
     var box=document.querySelector("#box");
     function foo(){
         //放到函数中是为了能添加和移除是同一个事件，只需要拿到foo
        console.log("我是box事件")
     }
     on(box,"click",foo);//添加box事件
     on(btn,"click",function(){
         //btn点击时移除box事件 
        off(box,"click",foo);
     });
</script>

三、获取滚动条高度的兼容问题（scrollTop）

window.onscroll=function(){
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    console.log(scrollTop);
}

四、获取键盘事件的键盘码的兼容问题（keyCode和IE：which）

document.onkeydown=function(ev){
    var e=ev||window.event;
    var keyCode=e.keyCode||e.which;
    console.log(keyCode);
}

五、事件委托精确获取目标元素的兼容问题（target和IE：srcElement）

btn.onclick=function(ev){
    var e = ev || window.event;
    var target=e.target||e.srcElement;
    console.log(target);
}

六、阻止事件的默认行为的兼容问题（preventDefault和IE：returnValue）

默认行为是浏览器之中非常重要的构成之一,比如标签类的超链接跳转、form表单提交、浏览器行为的右键菜单、鼠标按下文字选中等都属于浏览器的默认行为，我们用下面的方法阻止它们。但是我们不能随意的去禁止全部的默认事件;

<a href="javascript:void(0)" >点击跳转到百度</a>
<form action="javascript:void(0)" >
    <input type="text">
    <button id="link">表单里面的button</button>
</form>

document.oncontextmenu = function( ev ){
    var e = ev || window.event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
        //return false也可以阻止默认事件但是适合后面没有其他逻辑代码，否则会终止函数执行
    }
}

七、阻止事件冒泡的兼容问题（stopPropagation和IE：cancelBubble）

document.onclick = function( ev ){
    var e = ev || window.event;
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
       e.cancelBubble = true;
    }
}

八、获取非行间CSS样式的兼容性问题（getComputedStyle和IE：currentStyle）

/**
 * 获取元素最终样式值
 * @param obj  <DOMobject> 要获取属性的元素对象
 * @param attr <string>    样式名称
 * @return     <string>    获取到的样式值
 */
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr]
    }
}
//使用方法
var box=document.querySelector(".box");
var width=getStyle(box,"width");
console.log(width);

以上内容全部由自己整理，暂时想到的就这些，如果有小伙伴发现有问题或者有其他更好方法，欢迎评论区一起讨论学习。

标签：box,function,兼容问题,javascript,js,事件,isCapture,var,ele
来源： https://www.cnblogs.com/sunhuan-123/p/12815204.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9