JavaScript onClick-Handler auf ein eingebettetes HTML-Objekt hinzufügen?

Question

Ich versuche, einen onClick-Handler auf ein eingebettetes Objekt hinzuzufügen. Die Handler braucht eine Funktion auszuführen, die in einer externen JS-Datei ist, die zu der aktuellen HTML-Datei über <script src="... verknüpft.

Muss ich die Funktion anders weil es verweisen anderswo angeordnet werden?

Hier ist der Code, wie es derzeit steht (was nicht funktioniert, sondern auch produziert keine Fehler):

<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53" 
type="image/svg+xml" onClick="buttonEvent('buttonClicked')"/>

Answer 1

Sie haben zu implementieren Onclick innen den svg und verknüpfen es mit der externen JavaScript-Funktion innerhalb des SVG mit Hilfe von JavaScript. Sehen Sie die SVG Wiki für Beispiele.

Update: Anscheinend ist die SVG Wiki ist nicht mehr. Kein Wunder, dass die besten Referenzen, die ich jetzt kann (schnell) zu finden sind auf Stackoverflow selbst.

Diese Antwort beschreibt, wie innerhalb des SVG implementieren Onclick.

Answer 2

Verwenden Sie entweder Javascript-Bindung ( Mario Menger , antwortete, dass bereits).

Wenn Sie nicht können oder nicht die Bindung verwenden, können Sie verwenden, was xil3 mit einer Änderung antwortete:

Verwenden Sie eine leere Ankertag <a href="javascript:someFunc()"></a> als Klick Verbraucher. Stellen sie den z-index und Position / Größe, so dass es die svg Objekt positioniert über (für Cross-Browser-Kompatibilität).

Answer 3

Onclick sollten alle klein geschrieben werden.

<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53" 
type="image/svg+xml" onclick="alert('hello!');"/>