Wie kann ich ein onclick () -Ereignis programmgesteuert von einem Ankertag aus aufrufen, während die 'this'-Referenz in der onclick-Funktion erhalten bleibt?

Folgendes funktioniert nicht ... (zumindest nicht in Firefox: document.getElementById('linkid').click()ist keine Funktion)

<script type="text/javascript">
    function doOnClick() {
        document.getElementById('linkid').click();
        //Should alert('/testlocation');
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

Sie benötigen applyden Ereignishandler im Kontext dieses Elements:

var elem = document.getElementById("linkid");
if (typeof elem.onclick == "function") {
    elem.onclick.apply(elem);
}

Andernfalls thiswürde auf den Kontext verwiesen, in dem der obige Code ausgeführt wird.

Der beste Weg, dies zu lösen, ist die Verwendung von Vanilla JS. Wenn Sie jedoch bereits jQuery verwenden, gibt es eine sehr einfache Lösung:

<script type="text/javascript">
    function doOnClick() {
        $('#linkid').click();
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

Getestet in IE8-10, Chrome, Firefox.

Um ein Ereignis auszulösen, rufen Sie einfach den Ereignishandler für dieses Element auf. Leichte Änderung von Ihrem Code.

var a = document.getElementById("element");
var evnt = a["onclick"];

if (typeof(evnt) == "function") {
    evnt.call(a);
}

$("#linkid").trigger("click");

Zugegeben, OP erklärte sehr ähnlich, dass dies nicht funktionierte, aber für mich. Basierend auf den Notizen in meiner Quelle scheint es, dass es zu der Zeit oder nach dem Post von OP implementiert wurde. Vielleicht ist es jetzt mehr Standard.

document.getElementsByName('MyElementsName')[0].click();

In meinem Fall hatte mein Button keine ID. Wenn Ihr Element eine ID hat, verwenden Sie vorzugsweise die folgende (nicht getestete).

document.getElementById('MyElementsId').click();

Ich habe diese Methode ursprünglich ausprobiert und sie hat nicht funktioniert. Nach dem Googeln kam ich zurück und stellte fest, dass mein Element namentlich war und keinen Ausweis hatte. Stellen Sie sicher, dass Sie das richtige Attribut aufrufen.

Quelle: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Schauen Sie sich die handleEvent-Methode
https://developer.mozilla.org/en-US/docs/Web/API/EventListener an

"Rohes" Javascript:

function MyObj() {
   this.abc = "ABC";
}
MyObj.prototype.handleEvent = function(e) {
   console.log("caught event: "+e.type);
   console.log(this.abc);
}

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj);

Klicken Sie nun auf Ihr Element (mit der ID "myElement") und es sollte Folgendes in der Konsole drucken:

gefangenes Ereignis: Klicken Sie auf
ABC

Auf diese Weise können Sie eine Objektmethode als Ereignishandler verwenden und auf alle Objekteigenschaften in dieser Methode zugreifen.

Sie können nicht einfach eine Methode eines Objekts direkt an addEventListener übergeben (so :) element.addEventListener('click',myObj.myMethod);und erwarten myMethod, dass Sie so tun , als ob ich normalerweise für das Objekt aufgerufen worden wäre. Ich vermute, dass jede an addEventListener übergebene Funktion irgendwie kopiert wird, anstatt referenziert zu werden. Wenn Sie beispielsweise eine Ereignis-Listener-Funktionsreferenz an addEventListener übergeben (in Form einer Variablen) und diese Referenz deaktivieren, wird der Ereignis-Listener weiterhin ausgeführt, wenn Ereignisse abgefangen werden.

Eine andere (weniger elegante) Problemumgehung, um eine Methode als Ereignis-Listener und -Stil zu übergeben thisund dennoch Zugriff auf Objekteigenschaften innerhalb des Ereignis-Listeners zu haben, wäre ungefähr so:

// see above for definition of MyObj

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj.handleEvent.bind(myObj));

Alter Thread, aber die Frage ist immer noch relevant, also ...

(1) Das Beispiel in Ihrer Frage funktioniert jetzt in Firefox. Zusätzlich zum Aufrufen des Ereignishandlers (der eine Warnung anzeigt) klickt er AUCH auf den Link und verursacht eine Navigation (sobald die Warnung geschlossen wird).

(2) Um NUR den Ereignishandler aufzurufen (ohne die Navigation auszulösen), ersetzen Sie einfach:

document.getElementById('linkid').click();

mit

document.getElementById('linkid').onclick();

Wenn Sie dies nur verwenden, um auf die Funktion im onclick-Attribut zu verweisen, scheint dies eine sehr schlechte Idee zu sein. Inline-Events sind im Allgemeinen eine schlechte Idee.

Ich würde folgendes vorschlagen:

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

handler = function(){
   showHref(el);
}

showHref = function(el) {
   alert(el.href);
}

var el = document.getElementById('linkid');

addEvent(el, 'click', handler);

Wenn Sie dieselbe Funktion aus einem anderen Javascript-Code aufrufen möchten, ist die Simulation eines Klicks zum Aufrufen der Funktion nicht der beste Weg. Erwägen:

function doOnClick() {
   showHref(document.getElementById('linkid'));
}

Im Allgemeinen würde ich davon abraten, die Ereignishandler "manuell" aufzurufen.

• Es ist unklar, was aufgrund mehrerer registrierter Listener ausgeführt wird
• Gefahr, in eine rekursive und unendliche Ereignisschleife zu geraten (Klick A, Auslöser Klick B, Auslöser Klick A usw.)
• Redundante Aktualisierungen des DOM
• Es ist schwierig, vom Benutzer verursachte tatsächliche Änderungen in der Ansicht von Änderungen zu unterscheiden, die als Initialisierungscode vorgenommen wurden (der nur einmal ausgeführt werden sollte).

Besser ist es, herauszufinden, was genau geschehen soll, dies in eine Funktion einzufügen und manuell aufzurufen UND als Ereignis-Listener zu registrieren.