Question

我正在尝试构建一个扫雷游戏，让游戏网格脱离桌面。当我点击它时，我坚持获取我为特定单元格设置的ID。这是制作表格的代码。

var table = document.createElement("table");
for (var k = 0; k < twoDArray.length; k++) {
    var row = document.createElement("tr");
    for (var l = 0; l < twoDArray[k].length; l++) {
        var cell = document.createElement("td");
        cell.textContent = twoDArray[k][l];
        cell.setAttribute("id", "" + k + "," + l + "");
        cell.setAttribute("onclick", 'clickHandler('+cell+');');
        row.appendChild(cell);
    }
    table.appendChild(row);
}
return document.getElementById("tableDiv").appendChild(table);

这是clickHandler（）函数：

function clickHandler(cell) {
    console.log(cell.getAttribute("id"));
}

拜托，我做错了什么？获取未捕获的SyntaxError：意外的标识符错误。

Answer 1

您不能有意义地将字符串连接与DOM元素一起使用，因此这是不正确的：

cell.setAttribute("onclick", 'clickHandler('+cell+');');

此外，没有理由为此使用字符串。如果要使用“简单”事件处理，请为onclick属性分配一个函数：

cell.onclick = clickHandler;

要使用现代事件处理，请使用addEventListener：

cell.addEventListener(clickHandler);

可悲的是，旧的IE（或IE中的“伪装成老旧无用”模式，又名“兼容模式”）没有addEventListener而你必须使用attachEvent;请参阅{{ 3}}如果你需要支持旧的IE /无用的IE。

（下面的另一个选择。）

在任何一种情况下，当调用处理程序时，您添加处理程序的单元格可通过this获得，因此：

function clickHandler() {
    console.log(this.id);
}

它也可以通过您收到的事件对象的currentTarget属性获得，因此这也有效：

function clickHandler(e) {
    console.log(e.currentTarget.id);
}

（还有e.target，这是事件发源的地方 - 例如，如果您<td id="foo"><span>click me</span></td>上有click并挂钩td，则点击span然后this和e.currentTarget引用td而e.target引用span。

但另一种替代方法是在每个click上不挂钩td，而是将其挂钩在table上，然后从{ {1}}：

e.target

和

table.addEventListener("click", clickHandler);

附注：如上所示，function clickHandler(e) { var td = e.target; while (td.tagName != "TD") { td = td.parentNode; if (!td || td == this) { return; // Click didn't pass through a td } } console.log(td.id); }是id属性的反映属性，因此您可以使用属性设置 id以及：

id

另请注意，该行原始版本的cell.id = k + "," + l;和"" +完全不需要;如果对数字和字符串使用+ ""，则无论操作数的顺序如何，它都会进行字符串连接，而不是加法。

Answer 2

cell.setAttribute("onclick", 'clickHandler('+cell+');');

您正在将cell（这是一个HTML元素对象）转换为字符串（将为"[object Object]"，因此您生成的JS将如下所示：

clickHandler([object Object]);

...这是JS，语法错误。

您应该使用 this 关键字：

cell.setAttribute("onclick", 'clickHandler(this);');

给

clickHandler(this);

在点击事件处理程序的上下文中使用时，this是被点击的元素。

也就是说，使用JS生成一个后来被评估为JS的字符串简直令人讨厌。这是一个简单的案例，但增加了更多的复杂性，它迅速成为错误和安全问题的良好来源。

您应该使用addEventListener并改为分配功能。

cell.addEventListener("click", myFunction);

function myFunction(event) {
    clickHandler(this);
}

（重写clickHandler只是简单地使用this可能比创建包装函数更好。）

请注意，表格单元格不是交互式控件。使用它们会给那些没有使用指点设备与计算机进行交互的人（例如许多使用屏幕阅读器，键盘或呼吸开关的人）带来问题。

通常最好在按钮内放一个按钮并使其成为点击目标。

获取HTMLTableCellElement

2 个答案: