IE下自定义元素event事件无效的原因及处理方法

今天终于又一次征服了万恶的IE，先来讲讲需求吧，现在web上很流行鼠标手势支持，但是本身不支持所以只能自己写了，思路是这样的，当按下鼠标左键的时候开始画点，直到放开鼠标按键为止。由于IE下我没有想到比较好的元素来做点所以随便自己create了一个元素xdTrailDot。然后自己定义长度和高度。问题来了，自己定义的element的event事件在调用的时候IE并没有将window.event这个对象传进来。导致事件无法气泡，不过还好IE下事件是串行行的，所以IE不传Event我们可以直接用调用window.event并且手工调用Element.fireEvent('eventnname',event)来构建事件chain。

function PageScreen(){ var t=this; var body=document.body; t.clientWidth=body.clientWidth; t.clientHeight=body.clientHeight; t.scrollWidth=body.scrollWidth; t.scrollHeight=body.scrollHeight<1024?window.screen.availHeight:body.scrollHeight; t.startDraw=false; } PageScreen.prototype.markFullScreen=function(){ var t=this; if(!t.markDiv){ var markDiv=document.createElement('div'); markDiv.id='PageScreen-markDiv'; st=markDiv.style; st.position='absolute'; st.left='0px'; st.top='0px'; st.backgroundColor='#FFAC56'; st.filter='Alpha(Opacity=50)'; st.height=t.scrollHeight+'px'; st.width=t.scrollWidth+'px'; t.boundleEvent(markDiv); document.body.appendChild(markDiv); t.markDiv=markDiv; } } PageScreen.prototype.preDraw=function(){ var t=this; t._trailOffsetX = document.body.offsetWidth;//docBox.screenX; t._trailOffsetY = document.body.offsetHeight; t.lastDotX=null; t.lastDotY=null; t.lastDot=null; if(!t._trailArea){ var _trailArea=document.createElement('xDTrailArea'); document.body.appendChild(_trailArea); t._trailArea=_trailArea; } if(!t._trailDot){ var _trailDot=document.createElement('xdTrailDot'); _trailDot.style.width = "3px"; _trailDot.style.height = "3px"; _trailDot.style.background = "#ff0000"; _trailDot.style.border = "0px"; _trailDot.style.position = "absolute"; _trailDot.style.zIndex = 2147483647; t._trailDot=_trailDot; } } PageScreen.prototype.draw=function(e){ var t=this,x=e.x,y=e.y; t.lastDotX=t.lastDotX!=null?t.lastDotX:e.x; t.lastDotY=t.lastDotY!=null?t.lastDotY:e.y; t.drawDot(t.lastDotX,t.lastDotY,x,y); } PageScreen.prototype.drawDot=function(sx,sy,dx,dy){ if(!this._trailArea) return; var xm=dx-sx; var ym=dy-sy; var xDecrement=xm<0?1:-1; var yDecrement=ym<0?1:-1; if (Math.abs(xm) >= Math.abs(ym)){ for (var i = xm; i != 0; i += xDecrement) this.strokeDot(dx - i, dy - Math.round(ym * i / xm)); //this.addInfo('-------->Xmove-done,'+xDecrement); }else{ for (var i = ym; i != 0; i += yDecrement) this.strokeDot(dx - Math.round(xm * i / ym), dy - i); //this.addInfo('-------->Ymove-done,'+yDecrement); } } PageScreen.prototype.strokeDot=function(x,y){ var t=this; if (t.lastDot && t.lastDotY && t.lastDotY === y) { var w = t.lastDotW + Math.abs(t.lastDotX - x) + 3 ; t.lastDot.style.width = w + "px"; t.lastDot.style.left = (t.lastDotX < x ? t.lastDotX : x) + "px"; return; }else if (t.lastDot && t.lastDotX === x) { var h = t.lastDotH + Math.abs(t.lastDotY - y) + 3; t.lastDot.style.height = h + "px"; t.lastDot.style.top = (t.lastDotY < y ? t.lastDotY : y) + "px"; return; } var dot = t._trailDot.cloneNode(true); dot.onmouseup=function(e){ e=e||window.event; t.markDiv.fireEvent('onmouseup',e); }; dot.style.left = x + "px"; dot.style.top = y + "px"; t.lastDotX = x; t.lastDotY = y; t.lastDotW = 1; t.lastDotH = 1; //t.addInfo('draw('+x+','+y+')'); t._trailArea.appendChild(dot); t.lastDot=dot; } PageScreen.prototype.cleanUp=function(){ var t=this; if(t._trailArea){ t._trailArea.innerHTML=""; } } PageScreen.prototype.boundleEvent=function(elem){ var addInfo=this.addInfo; var self=this; var mu=function(e){ if(e.button==1 || e.button==2){ if (e.button==2) e.cancelBubble=true; self.startDraw=false;self.addInfo('stop-draw'); self.cleanUp.call(self); } if(e.button==2) return false; }; var md=function(e){ self.startDraw=true;self.addInfo('start-draw'); self.preDraw.call(self); }; var mv=function(e){ if(self.startDraw==false) return; self.draw.call(self,e); }; elem.attachEvent('onmouseup',mu); elem.attachEvent('onmousedown',md); elem.attachEvent('onmousemove',mv); } PageScreen.prototype.showPageInfo=function(){ var infoDiv=document.getElementById('PageScreen-infoDiv'); if(!infoDiv){ var el=document.createElement('div'); var st=el.style; el.id='PageScreen-infoDiv'; st.position='absolute'; st.left='0px'; st.bottom='0px'; st.backgroundColor='#FFAC56'; st.height='100px'; st.width=this.clientWidth+'px'; st.border='1px solid'; st.overflowY='scroll'; st.overflowX='hidden'; st.scrollBarArrowColor='#48b4fc'; st.scrollBarBaseColor='#bbeeff'; document.body.appendChild(el); infoDiv=el; } return infoDiv; } PageScreen.prototype.addInfo=function(infoData){ var infoDiv=this.showPageInfo(); if(!this.infoDivUl){ var infoDivUl=document.createElement('ul'); infoDiv.appendChild(infoDivUl); this.infoDivUl=infoDivUl; } if(infoData.constructor == String){ var li=document.createElement('li'); li.innerHTML=infoData; this.infoDivUl.insertBefore(li,this.infoDivUl.firstChild); } }