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

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

  1. function PageScreen(){
  2.   var t=this;
  3.   var body=document.body;
  4.   t.clientWidth=body.clientWidth;
  5.   t.clientHeight=body.clientHeight;
  6.   t.scrollWidth=body.scrollWidth;
  7.   t.scrollHeight=body.scrollHeight<1024?window.screen.availHeight:body.scrollHeight;
  8.   t.startDraw=false;
  9. }
  10. PageScreen.prototype.markFullScreen=function(){
  11.   var t=this;
  12.   if(!t.markDiv){
  13.     var markDiv=document.createElement('div');
  14.     markDiv.id='PageScreen-markDiv';
  15.     st=markDiv.style;
  16.      st.position='absolute';
  17.     st.left='0px';
  18.     st.top='0px';
  19.     st.backgroundColor='#FFAC56';
  20.     st.filter='Alpha(Opacity=50)';
  21.     st.height=t.scrollHeight+'px';
  22.     st.width=t.scrollWidth+'px';
  23.     t.boundleEvent(markDiv);
  24.     document.body.appendChild(markDiv);
  25.     t.markDiv=markDiv;
  26.   }
  27. }
  28. PageScreen.prototype.preDraw=function(){
  29.   var t=this;
  30.   t._trailOffsetX = document.body.offsetWidth;//docBox.screenX;
  31.     t._trailOffsetY = document.body.offsetHeight;
  32.   t.lastDotX=null;
  33.   t.lastDotY=null;
  34.   t.lastDot=null;
  35.   if(!t._trailArea){
  36.     var _trailArea=document.createElement('xDTrailArea');
  37.     document.body.appendChild(_trailArea);
  38.     t._trailArea=_trailArea;
  39.   }
  40.   if(!t._trailDot){
  41.     var _trailDot=document.createElement('xdTrailDot');
  42.     _trailDot.style.width       = "3px";
  43.     _trailDot.style.height      = "3px";
  44.     _trailDot.style.background  = "#ff0000";
  45.     _trailDot.style.border      = "0px";
  46.     _trailDot.style.position    = "absolute";
  47.     _trailDot.style.zIndex      = 2147483647;
  48.     t._trailDot=_trailDot;
  49.   }
  50. }
  51. PageScreen.prototype.draw=function(e){
  52.   var t=this,x=e.x,y=e.y;
  53.   t.lastDotX=t.lastDotX!=null?t.lastDotX:e.x;
  54.   t.lastDotY=t.lastDotY!=null?t.lastDotY:e.y;
  55.   t.drawDot(t.lastDotX,t.lastDotY,x,y);
  56. }
  57. PageScreen.prototype.drawDot=function(sx,sy,dx,dy){
  58.   if(!this._trailArea) return;
  59.   var xm=dx-sx;
  60.   var ym=dy-sy;
  61.   var xDecrement=xm<0?1:-1;
  62.   var yDecrement=ym<0?1:-1;
  63.   if (Math.abs(xm) >= Math.abs(ym)){
  64.     for (var i = xm; i != 0; i += xDecrement)
  65.       this.strokeDot(dx - i, dy - Math.round(ym * i / xm));
  66.     //this.addInfo('-------->Xmove-done,'+xDecrement);
  67.   }else{
  68.     for (var i = ym; i != 0; i += yDecrement)
  69.       this.strokeDot(dx - Math.round(xm * i / ym), dy - i);
  70.     //this.addInfo('-------->Ymove-done,'+yDecrement);
  71.   }
  72. }
  73. PageScreen.prototype.strokeDot=function(x,y){
  74.   var t=this;
  75.   if (t.lastDot && t.lastDotY && t.lastDotY === y) {
  76.         var w = t.lastDotW + Math.abs(t.lastDotX - x) + 3 ;
  77.         t.lastDot.style.width = w + "px";
  78.         t.lastDot.style.left  = (t.lastDotX < x ? t.lastDotX : x) + "px";
  79.         return;
  80.     }else if (t.lastDot && t.lastDotX === x) {
  81.         var h = t.lastDotH + Math.abs(t.lastDotY - y) + 3;
  82.         t.lastDot.style.height = h + "px";
  83.         t.lastDot.style.top = (t.lastDotY < y ? t.lastDotY : y) + "px";
  84.         return;
  85.     }
  86.     var dot = t._trailDot.cloneNode(true);
  87.   dot.onmouseup=function(e){
  88.     e=e||window.event;
  89.     t.markDiv.fireEvent('onmouseup',e);
  90.   };
  91.     dot.style.left = x + "px";
  92.     dot.style.top = y + "px";
  93.   t.lastDotX = x;
  94.     t.lastDotY = y;
  95.     t.lastDotW = 1;
  96.     t.lastDotH = 1;
  97.   //t.addInfo('draw('+x+','+y+')');
  98.   t._trailArea.appendChild(dot);
  99.     t.lastDot=dot;
  100. }
  101. PageScreen.prototype.cleanUp=function(){
  102.   var t=this;
  103.   if(t._trailArea){
  104.     t._trailArea.innerHTML="";
  105.   }
  106. }
  107. PageScreen.prototype.boundleEvent=function(elem){
  108.   var addInfo=this.addInfo;
  109.   var self=this;
  110.   var mu=function(e){
  111.   if(e.button==1 || e.button==2){
  112.       if (e.button==2)
  113.         e.cancelBubble=true;
  114.     self.startDraw=false;self.addInfo('stop-draw');
  115.     self.cleanUp.call(self);
  116.     }
  117.     if(e.button==2)
  118.       return false;
  119.   };
  120.   var md=function(e){
  121.     self.startDraw=true;self.addInfo('start-draw');
  122.     self.preDraw.call(self);
  123.   };
  124.   var mv=function(e){
  125.     if(self.startDraw==false) return;
  126.     self.draw.call(self,e);
  127.   };
  128.   elem.attachEvent('onmouseup',mu);
  129.   elem.attachEvent('onmousedown',md);
  130.   elem.attachEvent('onmousemove',mv);
  131. }
  132. PageScreen.prototype.showPageInfo=function(){
  133.   var infoDiv=document.getElementById('PageScreen-infoDiv');
  134.   if(!infoDiv){
  135.     var el=document.createElement('div');
  136.     var st=el.style;
  137.     el.id='PageScreen-infoDiv';
  138.     st.position='absolute';
  139.     st.left='0px';
  140.     st.bottom='0px';
  141.     st.backgroundColor='#FFAC56';
  142.     st.height='100px';
  143.     st.width=this.clientWidth+'px';
  144.     st.border='1px solid';
  145.     st.overflowY='scroll';
  146.     st.overflowX='hidden';
  147.     st.scrollBarArrowColor='#48b4fc';
  148.     st.scrollBarBaseColor='#bbeeff';
  149.     document.body.appendChild(el);
  150.     infoDiv=el;
  151.   }
  152.   return infoDiv;
  153. }
  154. PageScreen.prototype.addInfo=function(infoData){
  155.   var infoDiv=this.showPageInfo();
  156.   if(!this.infoDivUl){
  157.     var infoDivUl=document.createElement('ul');
  158.     infoDiv.appendChild(infoDivUl);
  159.     this.infoDivUl=infoDivUl;
  160.   }
  161.   if(infoData.constructor == String){
  162.     var li=document.createElement('li');
  163.     li.innerHTML=infoData;
  164.     this.infoDivUl.insertBefore(li,this.infoDivUl.firstChild);
  165.   }
  166. }

本文转自:http://blog.csdn.net/hxshandle/article/details/4435697

标签: IE自定义元素

添加新评论