Question

我正试图用“onclick”事件调用一个函数，如下所示：

<td id="A1" onclick="move()" class="white"></td>
<td id="A2" onclick="move()" class="painted bp"></td>
<td id="A3" onclick="move()" class="white"></td>

在函数本身中，我引用“this”：

function move(e){
    var myId = this.id;
    alert("myId");
}

当我运行整个事情时，警报说“未定义”。当我尝试alert(this)时，我得到[对象窗口]。我正在使用IE9，顺便说一句。谢谢

Answer 1

this是代码中的window对象。

您可以传递this作为参数。

<td id="A1" onclick="move(this)" class="white"></td>

然后：

function move(ele){
    var myId = ele.id;
    alert("myId");
}

Answer 2

从事件处理程序调用函数时，处理程序不会设置其this（尽管您可以根据Xdazz的答案从处理程序传递this，或者设置this每个凯尔的回答）。另一种方法是从与事件关联的事件对象中提取sender元素：

function move(e) {
    if (!e)
        e = window.event;
    var sender = e.srcElement || e.target;

    //maybe some nested element.. find the actual table cell parent.
    while (sender && sender.nodeName.toLowerCase() != "td")
        sender = sender.parentNode;

    var myId = sender.id;
    alert(myId);
}

您还必须明确传递事件：

onclick="move(event)"

请注意，当表格单元格具有嵌套元素时，它们将成为“发送者”，从而获取您必须向上遍历的所需元素（即表格单元格）。 为了避免所有这些问题，请参阅下面的代码，了解如何通过代码附加处理程序。

Live test case

也就是说，更好的做法是通过代码而不是内联来绑定click事件 - 不要将HTML与JavaScript混合。要实现这一点，请使用以下代码：

window.onload = function() {
    var arrCells = document.getElementsByTagName("td");
    for (var i = 0; i < arrCells.length; i++) {
        var oCell = arrCells[i];
        if (oCell.id && oCell.id.substr(0, 1) == "A") {
            oCell.onclick = move;
        }
    }
}

使用上面的代码，您可以从HTML中删除内联onclick=调用并保留原始功能 - this将指向单击的表格单元格。

Updated fiddle

Answer 3

<td id="A1" onclick="move.call(this)" class="white"></td>

现在this会引用td函数中的move元素。

Answer 4

尝试使用事件目标来获取您正在寻找的dom元素：

function move(e) {
  alert(e.target);
}

Javascript“this”参考onclick事件无法正常工作

4 个答案: