javascript——事件兼容(部分)

Posted 前端之路

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript——事件兼容(部分)相关的知识，希望对你有一定的参考价值。

<!--跨浏览器事件兼容-->
<!DOCTYPE html>
<html>
 <head> </head>
 <meta charset="utf-8"> 
 <body>
  <div>
   <a href="http://www.baidu.com" id="al" >Click Me</a>
  </div>
 </body>
<script type="text/javascript">
 var EventUtil={
     addHindler:function (ele,type,func){//添加事件
         if(ele.addEventListener){//除IE8及一下浏览器外兼容
             ele.addEventListener(type,func,false);
         }
         else if(ele.attachEvent){//IE8及以下版本浏览器
             ele.attachEvent("on"+type,func);
         }
         else {ele["on"+type]=func}//兼容所有版本
     },
    removeHindler:function(ele,type,func){//删除绑定事件
        if(ele.removeEventListener){//除IE8及一下浏览器外兼容
            ele.removeEventListener(type,func,false);
        }
        else if (ele.dettachEvent) {//IE8及以下浏览器
            ele.dettachEvent["on"+type]=func;
        }
        else{ele["on"+type]=func;}
    },
    getEvent:function(event){//获取事件event
        return event? event:window.event;//兼容IE获取event
    },
    preventDefault:function(event){//兼容IE阻止事件默认行为
        event.preventDefault? event.preventDefault(): event.returnValue=false;
    },
    getTarget:function(event){//兼容IE获取事件目标
        return event.target||event.srcElement;
    },
    stopPropagation:function(event){//兼容IE停止事件冒泡
        event.stopPropagation ? event.stopPropagation():event.cancelBubble=true;
    },
    getRelatedTarget:function(event){//mouseover 和mouseout有相关元素信息，其他鼠标事件返回null
        if(event.relatedTarget){
            return event.relatedTarget;
        }
        else if(event.fromElement){
            return event.fromElement;
        }
        else if (event.toElement) {
            return event.toElement;
        }
        else
            return null;
    },
    getButton: function (event){//获取鼠标按钮信息，0为左键，1为滚轮，2为右键
        if(document.implementation.hasFeature("MouseEvents","2.0")){
            return event.button;
        }
        else{ 
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                 return 0;//将带有左键（主键）按钮的都归为主键
                case 2:
                case 6:
                 return 2;//将带有右键（次键）未带有主键的归为次键
                case 4:
                 return 1//将只有滚轮的归为滚轮
             }
        }
    },

 }
 var al=document.getElementById("al");
 function fun(event){
     event=EventUtil.getEvent(event);
     EventUtil.stopPropagation(event);//停止事件冒泡
     EventUtil.preventDefault(event);//阻止默认行为
    EventUtil.getRelatedTarget(event);
    EventUtil.getButton(event);
 }
 EventUtil.addHindler(al,"click",fun)//添加绑定事件
</script>
</html>

 

以上是关于javascript——事件兼容(部分)的主要内容，如果未能解决你的问题，请参考以下文章

javascript 即兼容性升级页面样式片段

JavaScript绑定事件跟解绑事件的兼容代码

javascript 兼容W3c和IE的添加（取消）事件监听方法

Javascript不同浏览器差异及兼容方法

常用Javascript代码片段集锦

JavaScript 代码片段