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>

関数自体では、「これ」を参照します。

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ハンドラーによって設定されません (ただし、thisXdazz の回答ごとにハンドラーから渡すことも、 thisKyle の回答ごとに設定することもできます)。もう 1 つの方法は、イベントに関連付けられたイベント オブジェクトから送信者要素を抽出することです。

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;
        }
    }
}

上記のコードを配置すると、HTML からインラインonclick=呼び出しを削除し、元の関数 (thisはクリックされたテーブル セルを指す) を保持できます。

フィドルを更新しました。

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

関数内の要素thisを参照します。tdmove

于 2012-10-10T13:43:25.250 に答える
0

代わりにイベント ターゲットを使用して、探している dom 要素を取得してみてください。

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