使用Javascript DOM

Question

克隆一个节点我想创建下面的代码使用JavaScript DOM克隆

var summaryDiv = __createElement("div","sDiv","sDiv"+j); 
     summaryDiv.onmouseover = function() {this.setAttribute("style","text-decoration:underline;cursor:pointer;");} 
     summaryDiv.onmouseout = function() {this.setAttribute("style","text-decoration:none;");} 
     if(browser.isIE) { 
      summaryDiv.onclick = new Function("__fc.show_tooltip("+j+",'view_month')"); 
    } else { 
      summaryDiv.setAttribute("onclick", "__fc.show_tooltip("+j+",'view_month',event)"); 
     } 
    someobj.appendChild(summaryDiv); 

我米使用OBJ = summaryDiv.cloneNode（真），这是创建节点。但是onclick事件不会在Internet Explorer中引发火灾。任何机构都可以帮助我解决这个问题？

Answer 1

this.setAttribute("style","text-decoration:underline 

不要使用的setAttribute，它不会在IE 8 <的工作很多情况下（包括本）和HTML/CSS-DOM属性是更具可读性：this.style.textDecoration= 'underline';。 （这些天你可能会想用CSS :hover规则而不是JS悬停高亮显示，只有IE6中的任意位置悬停不起作用;最后剩余的IE6用户通常可以在没有最眩光的情况下长时间工作它仍然有效。他们可能是用来现在看到破损的网站...）

if(browser.isIE) { 
     summaryDiv.onclick = new Function("__fc.show_tooltip("+j+",'view_month')"); 
    } else { 
     summaryDiv.setAttribute("onclick", "__fc.show_tooltip("+j+",'view_month',event)"); 
    } 

无需讨厌旧的浏览器嗅探（避免！）作为第一个这些将在所有的浏览器。然而，从一个字符串创建一个函数真的很难看。您可以使用文字的函数：

summaryDiv.onclick= function() { 
    __fc.show_tooltip(j, 'view_month'); 
}; 

但是，如果你在一个循环中这样做，你可能会受到Closure Loop Problem（超过j？）。让您可以与另一封，但ECMAScript的第五版的Function#bind是清洁：

summaryDiv.onclick= __fc.show_tooltip.bind(__fc, j, 'view_month'); 

Adding bind to browsers that don't yet support it.

但onclick事件[在克隆]在Internet Explorer的情况下是没有得到火。

是的，事件处理程序在克隆时不会被复制是正常的。 （实际上，它通常是IE误克隆通过的attachEvent这就是问题所在添加监听器，所以这是周围的其他方式。）

如果您想保留事件克隆后的处理，你必须手工进行：

newClone.onclick= oldNode.onclick;