Question

for(var i=1;i<=s;i++){if(e[r]<0&&n<=0)
{n=Math.abs(e[r])-1;r++}
else if(n>0){n--}else{t=e[r];r++}
var o=document.createElement("div");
o.style.height=t+"px";o.className="thumbnail";
o.id="thumb"+i;
o.setAttribute("onclick","Viewer.goToPage("+i+");");

由于Firefox OS中的CSP限制，我试图将onclick转换为addEventListener，但没有取得成功。

Answer 1

for (var i = 1; i <= s; i++) {
    if (e[r] < 0 && n <= 0) {
        n = Math.abs(e[r]) - 1;
        r++
    } else if (n > 0) {
        n--
    } else {
        t = e[r];
        r++
    }
    var o = document.createElement("div");
    o.style.height = t + "px";
    o.className = "thumbnail";
    o.id = "thumb" + i;
    (function(j, elem) {
        elem.addEventListener('click', function() {
            Viewer.goToPage(j);
        }, false);
    }(i, o));
}

您必须在IIFE中捕获迭代器的值，以使其在addEventListener的回调中保持

Answer 2

您可以使用 addEventListener ，但是我没有看到直接属性分配的任何好处（基于adeneo的代码）：

o.onclick = (function(pageNum) {
  return function() {
    Viewer.goToPage(pageNum);
  };
}(i));

// Presumably o is added to the document before the next iteration

此方法的一个好处是您可以稍后通过为元素的 onclick 属性分配新值来删除侦听器，或者使用 addEventListener （或等效的）。

如果 addEventListener 用于添加＆＃34;匿名＆＃34;功能，以后没有简单的方法可以删除它。

最好避免使用 setAttribute 来附加处理程序，因为它在浏览器中不一致。每个浏览器都支持直接设置该属性，返回IE和NN版本3或更早版本。

将Onclick转换为addEventListener

2 个答案: