Funktioniert click() nur einmal?

[Rolf B]

Hallo Nico,

ich kann's auch nicht nachvollziehen. Ich weiß, dass bestimmte Dinge in JavaScript nur funktionieren, wenn das Script unmittelbar durch eine Benutzeraktion gestartet wurde (also z.B. als click-Eventhandler). Das Laden der Seite und das Ausführen von Scripten während dieser Zeit ist keine direkte Benutzeraktion. Aber der Aufruf von click() auf einem Button-Element funktioniert auch ohne Benutzerinteraktion.

Es gibt aber Unterschiede: In dem PointerEvent-Objekt, das nach dem click-Aufruf in Funktion1 ankommt, ist die Eigenschaft isTrusted auf false gesetzt. Klickt man mit der Maus auf Button 1, steht die Eigenschaft auf true.

Frage wäre also:

• An welcher Stelle ist dein button1.click() Aufruf? Wird der überhaupt ausgeführt? Ist button1 an dieser Stelle überhaupt definiert und mit einem Wert gefüllt?

Um das herauszufinden, stellen sich diese weiteren Fragen:

• Hast Du die Entwicklerwerkzeuge geöffnet?
• Steht in der Konsole eine Fehlermeldung?

Grundsätzlich gilt noch: Es ist so, dass zu Urzeiten eine globale Variable event gesetzt wurde, wenn ein Event behandelt wird. Damals war das nötig, denn anders konnte man in einem onclick-Attribut nicht auf die Event-Daten zugreifen.

Aber wenn man einen EventListener nach der neuen Methode mit addEventListener registriert, dann bekommt die Listener-Funktion das Event-Objekt als Parameter übergeben. Um mal bei deinem Code zu bleiben:

button1.addEventlistener("click", function(event) {
    funktion1(event);
});

Und wie Gunnar sagte: so einen Durchlauferhitzer braucht man nicht. Eine Funktion, die das Klick-Event annehmen kann, hast Du schon. Auch die Funktionen, die mit dem function Statement definiert wurden, sind ganz normale Funktionsobjekte und können als Parameter übergeben werden. Deswegen reicht

button1.addEventlistener("click", funktion1);
button2.addEventlistener("click", funktion2);

Wichtig ist dann nur, dass Du in funktion1 das Event-Objekt auch entgegennimmst. Und am besten benennst Du den Parameter auch gleich möglichst lesbar:

function funktion1 (clickEvent) { 
    button2.click(clickEvent); 
} 

Und wieso hab ich das jetzt trotzdem rot angepinselt? Weil es nicht funktioniert. Die click-Methode erwartet keinen Parameter. Du kannst das click-Event aus dem ersten Klick nicht an den zweiten Eventhandler übergeben. Der Browser generiert ein neues Event-Objekt (und zwar eins mit isTrusted==false) und ruft funktion2 damit auf.

Es gibt aber eine Alternative: dispatchEvent. Damit kann man ein beliebiges Event-Objekt auf ein HTML Element „loslassen“:

function funktion1 (clickEvent) { 
    button2.dispatchEvent(clickEvent); 
} 

Äh, ja. Leider immer noch rot. Weil das Eventobjekt, das in clickEvent steht, bereits dispatched (verteilt) wird und nicht neu in den Dispatch-Prozess eingetütet werden kann.

Du musst ein neues Eventobjekt erzeugen. Und zwar ein PointerEvent (selbst dann, wenn der Button mit der ENTER Taste ausgelöst wurde):

function funktion1 (clickEvent) { 
    const newEvent = new PointerEvent("click", {
        details: clickEvent.detail,
    });
    button2.dispatchEvent(newEvent); 
} 

Die Eigenschaften von Eventobjekten sind readonly, deshalb kannst Du den Wert von details nicht einfach zuweisen. Du musst die Eigenschaften, die Du auf einen bestimmten Wert setzen willst, über ein Optionsobjekt an den Konstruktor übergeben. Da die Eigenschaften auf dem Optionsobjekt aber genau so heißen wie die Eigenschaften im Eventobjekt, kannst Du auch einfach das clickEvent-Objekt als Optionsobjekt übergeben und damit das Objekt sozusagen klonen:

function funktion1 (clickEvent) { 
    const newEvent = new PointerEvent("click", clickEvent);
    button2.dispatchEvent(newEvent); 
} 

Und dann geht's. ABER: im Eventhandler von button2 kommt immer ein Eventobjekt an, dem nicht vertraut wird (isTrusted steht auf false). Du verlierst bei diesem Übergang also etwas an Möglichkeiten, wie eingangs erwähnt.

Die wichtigste Frage wäre also die, die auch die Rumpelwichte an Ronja Räubertochter gestellt haben.

Wiesu tut sie er su?

Rolf