Javascript "this" - Referenz für das onclick-Ereignis nicht funktioniert

Ich versuche, eine Funktion aufzurufen, mit der "onclick" - Ereignis so:

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

In der Funktion selber, ich beziehe mich auf "das":

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

Wenn ich bei der ganzen Sache, der Alarm sagt 'undefined'. Wenn ich versuche alert(this) bekomme ich [object window].
Ich arbeite mit IE9, btw.
Dank

  • Dies ist, wie es funktioniert, this wird ersetzt durch window wenn nichts anderes zur Verfügung gestellt. Was erwarten Sie?
  • Zur info, die Funktion, wo this bezieht sich auf das element innerhalb der Anführungszeichen. Im Grunde onclick="move()" ist die gleiche wie .onclick = function( event ) { move(); }, wo, wie Sie erwarten, dass es sich zu Verhalten wie .onclick = move;
InformationsquelleAutor Tomcatom | 2012-10-10
  1. 10

    Beim Aufruf einer Funktion aus einem Ereignis-handler, seinen this ist nicht festgelegt durch den hf (obwohl Sie können pass this von der hf pro Xdazz Antwort, oder setzen Sie this pro Kyle ' s Antwort). Ein weiterer Ansatz besteht darin, die sender-element aus dem event-Objekt mit dem event verbunden:

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

    Dir auch passieren muss das Ereignis explizit:

    onclick="move(event)"

    Beachten Sie, dass wenn die Zelle in der Tabelle hat verschachtelte Elemente, die Sie werden die "sender" - damit greifen Sie das gewünschte element (das ist die Zelle in der Tabelle), müssen Sie die traverse nach oben. Dies zu vermeiden Kopfschmerzen finden Sie unter so fügen Sie dem Handler-code durch.

    Live-test-Fall.

    Sagte, eine bessere Praxis wäre, zu binden, das click-Ereignis per code anstelle von inline - mischen Sie nicht HTML mit JavaScript. Um dies zu erreichen, haben solche-code:

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

    Mit dem obigen code erstellt haben, können Sie entfernen Sie die inline - onclick= - Aufrufe aus HTML und halten Sie Ihre ursprüngliche Funktion - die this wird an der angeklickten Tabellenzelle.

    Aktualisiert fiddle.

    • e.target und e.srcElement sind nicht unbedingt das element, das den handler. Sie stellen die am tiefsten verschachtelte element erhalten, dass die Veranstaltung. (ich würde davon ausgehen das <td> Elemente haben einige Inhalte.)
    • könnte so sein, aber so weit ist es bei mir immer funktioniert und es sollte gut funktionieren in diesem Fall als gut.
    • Sicher, wenn die <td> Elemente nie untergeordneten Elemente, es wird funktionieren.
    • oh my.. sind Sie richtig (anklicken der ersten Zelle A1 zeigt D1) - editieren meinen Beitrag.
    • was ist bei img-Elementen in einigen der td ' s, und Sie haben ein onclick-Ereignis von Ihrer eigenen? würde es bekommen Priorität über die <td>s onclick-Ereignis automatisch?
    • Der handler für die img wird zuerst aufgerufen. Dann ist die Veranstaltung "Blasen" durch seine Vorfahren und ruft alle onclick Veranstaltungen findet er den Weg entlang. Also der handler auf die <td> auch aufgerufen werden. Aber es gibt Möglichkeiten, zu stoppen, die sprudelt an der <img> wenn nötig.
    • Pflege zu erklären, ihm im chat?
    • wen beziehen Sie sich?
    • Ihre aktualisierte Lösung wird sicherlich funktionieren... solange es keine verschachtelten Tabellen geklickt haben. 😉
    • grr!!
    • Entweder einer von Euch eigentlich, aber speziell an @user1689607 🙂 Aber ich habe da gesehen, Ihr update-Lösung und ich denke, alles ist klar. Vielen Dank, Ihr zwei!
    • Danke @Rob für die Klarstellung!
    • Chrome meckert Nicht Lesen kann Eigenschaft 'id' ist null, ich bin ziemlich verwirrt darüber.
    • was ist dein code? Es ist ziemlich spezifische Beispiel auf der Suche nach einem übergeordneten <td>.

    InformationsquelleAutor Shadow Wizard
  2. 12

    this ist die window Objekt in Ihrem code.

    Könnte passieren this als parameter.

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

    dann:

    function move(ele){
    var myId = ele.id;
    alert("myId");
}
    • Oh, ok ich bekomme es jetzt. Danke.
    • Sie retten meinen Tag 😉 Thx!!!!
    InformationsquelleAutor xdazz
  3. 4
    <td id="A1" onclick="move.call(this)" class="white"></td>

    Nun this beziehen sich auf die td element in Ihrem move Funktion.

    • Jetzt das ist der Weg, es zu tun. +1
    • Ich sehe, was du da gemacht hast.
    • Sie könnten es sogar noch ein wenig besser, wenn Sie passieren event als die zweite arg zu .call(). So auch alte IE erhalten das event-Objekt in der Funktion genauso wie eine normale Prozedur.
    • guter Punkt! Ich wollte nicht zu verwechseln die OP durch hinzufügen event. Ich war versucht, eine Lösung war super einfach.
    • Ja, vermutlich eine gute Entscheidung.
    InformationsquelleAutor Kyle
  4. 0

    Versuchen mit dem Ereignis-Ziel statt, um die dom-element, das Sie suchen:

    function move(e) {
  alert(e.target);
}
    • Tatsächlich, das gibt mir eine Fehlermeldung: Unable to get value of the property 'target': object is null or undefined Dies ist IE9
    • Ok, der Fehler ging Weg, wenn ich an das Ereignis ausdrücklich als @Shadow-Assistenten vorgeschlagen. danke!
    • e.target ist nicht unbedingt das gleiche wie das element, OP ausgerichtet ist.
    • siehe meine aktualisierte Antwort und dieser test case - wenn die Zelle hat, geschachtelte Elemente, solcher code wird mit "nicht bestanden", dass wieder die falsche ID. (nicht mein downvote BTW - diese Antwort ist nicht falsch meiner Meinung nach)
    • Ich habe versucht die neueste version, und ich legte die Ereignisse, die mit einer Schleife statt, die innerhalb der html, aber wenn ich versuchte oCell.onclick = move(this); statt oCell.onclick = move; ich habe ein "Nicht implementiert" Fehler
    • Nein, das ist falsch. oCell.onclick = move; ist der richtige Weg, und Sie haben this einfach gut in der Funktion.
    • Oh okay okay okay okay danke

    InformationsquelleAutor Karl Rosaen
Schreibe einen Kommentar