当前位置: 代码迷 >> Web前端 >> IE绑定事件,this指向现阶段的对象的变通方法
  详细解决方案

IE绑定事件,this指向现阶段的对象的变通方法

热度:283   发布时间:2012-08-28 12:37:01.0
IE绑定事件,this指向当前的对象的变通方法

通常情况下,在IE下通过attachEvent给对象绑定事件后,this指向的并不是当前触发事件的DOM对象,我们必须使用

?

event.srcElement手动获取。现在主流浏览器(非IE)都支持addEventListener方法。为了兼容,一般都这么写:

?

function addEvent(o,evt,fn,bubble){

     bubble = bubble || false;

     evt = evt.toLowerCase();

    if(o.addEventListener){

          
        o.addEventListener(evt,fn,bubble);

    }else{

        o.attachEvent("on"+evt,fn);

    }

}

?

?这样写在一定程度上兼容了浏览器。比如:

?

? ?function test(e){alert(this.nodeName)}

?

? ?addEvent(o,"click",test);

?

? 这样每个浏览器都可以绑定了。但是你会说IE不支持e,对,这正是这个函数的局限之一。IE不支持e,和e对应的是

?

event,我不想改动绑定的函数,我希望IE也支持e,下面的函数可以做到:

?

? ??function fixEvent(e){

		
			e = e  || window.event;
			
			return {
				type:e.type,
				target: e.target || e.srcElement,
				relatedTarget: e.relatedTarget || (e.type=="mouseout" ? e.toElement : e.fromElement),
				keyCode: e.charCode || e.keyCode,
				layerX: e.layerX || e.offsetX,
				layerY: e.layerY || e.offsetY,
				clientX: e.clientX,
				clientY: e.clientY,
				altKey: e.altKey,
				ctrlKey: e.ctrlKey,
				shiftKey: e.shiftKey,
				currentTarget: e.currentTarget,
				preventDefault:function(){
					
					 if (e.preventDefault){
						 
						 e.preventDefault();
						 
					 }else{
						
					     e.returnValue = false;		
					
						 return false;							
					
					 }
					 
				},
				stopPropagation:function(){
					 if (e && e.stopPropagation){
					 
					      e.stopPropagation();
					 
					 }else{
					 
					 	  e.cancelBubble=true;			
					 
					 }
					  				
				}
			};
		
		}

?

?

? ? 该函数需要一个事件对象作为参数,然后返回一个修正后的对象。现在修改一下addEvent方法:

?

? ??function addEvent(o,evt,fn,bubble){

     bubble = bubble || false;

     evt = evt.toLowerCase();

    if(o.addEventListener){

        o.addEventListener(evt,function(e){

                                                     e = fixEvent(e);
                                                     fn.call(e.target,e);

                                             },bubble);

    }else{

        o.attachEvent("on"+evt,function(e){

					e = fixEvent(e);

                                       
                                        //ie不支持currentTarget,手动设置为o 
                                        if(!e.currentTarget){
                      
                                            e.currentTarget = o;

                                        };
										
			                fn.call(e.target,e);                                       
                                 
                               });

    }

}

?

?

? ?这样我们绑定的test函数就可以在不同浏览器里执行了。

  相关解决方案