解决绝对定位div position: absolute,里面的icon不能点击的问题

案例:一个表格,鼠标悬浮在表元上显示图标,单击编辑表元,图标要根据表元类型自动选择

原代码:if(!this.hoverDom){
            this.hoverDom = this._property.doc.createElement('div');
            this.hoverDom.setAttribute("id","hhdom");
            this.hoverDom.style.cssText += "position:absolute;left:-9999px;top:-9999px";
            this.getGridDom().appendChild(this.hoverDom);
        }
        var euiIconClass = "";
      //略去调整高宽代码
        if(height<=46){
            euiIconClass = "eui-icon-xs";//特小图标
        }else if(height>78){ 
            euiIconClass = "eui-icon-m";
        }else{
            euiIconClass = "eui-icon-s";
        }
        this.hoverDom.innerHTML='<i class="eui-icon '+euiIconClass+'" >'+this.getIconByType(cell)+'</i>';
        $(this.hoverDom).find("i").css({"float":"right","line-height":height+"px"});
        
       
    };

结果发现绑定在grid上的单击事件,当鼠标在icon上点不了

原因:因为我的i标签是动态创建的,绑定点击事件的时候,根本没找到i标签;

改写:if(!this.hoverDom){
            this.hoverDom = this._property.doc.createElement('div');
            this.hoverDom.setAttribute("id","hhdom");
            this.hoverDom.style.cssText += "position:absolute;left:-9999px;top:-9999px;background-color:#FFFFFF";
            this.hoverDom.innerHTML='<i class="eui-icon '+euiIconClass+'" >'+this.getIconByType(cell)+'</i>';
            this.getGridDom().appendChild(this.hoverDom);
        }

让dom一开始就带上i标签,然后根据表元类型处理i的innerHTML,这样就没问题了