12

我正在尝试使用“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，顺便说一句。谢谢

4

4 回答 4

14

this是window代码中的对象。

this您可以作为参数传递。

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

然后：

function move(ele){
    var myId = ele.id;
    alert("myId");
}
于 2012-10-10T13:41:09.343 回答
12

从事件处理程序调用函数时，它this不是由处理程序设置的（​​尽管您可以this根据 Xdazz 的答案从处理程序传递，或this根据 Kyle 的答案设置）。另一种方法是从与事件关联的事件对象中提取发送者元素：

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)"

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

现场测试用例。

也就是说，更好的做法是通过代码而不是内联来绑定点击事件——不要将 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;
        }
    }
}

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

更新了小提琴。

于 2012-10-10T13:44:08.453 回答
4 
<td id="A1" onclick="move.call(this)" class="white"></td>

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

于 2012-10-10T13:43:25.250 回答
0

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

function move(e) {
  alert(e.target);
}
于 2012-10-10T13:42:24.157 回答