How to add JavaScript onClick handler to an embedded html object?

Question

I'm trying to add an onClick handler to an embedded object. The handler needs to execute a function which is in an external .js file which is linked to the current html file via <script src="....

Do I need to reference the function differently due to it being located elsewhere?

Here is the code as it currently stands (which does not work, but also does not produce any errors):

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

Answer 1

You have to implement onclick inside the svg and link it to the external JavaScript function using javascript inside the svg. See the SVG wiki for examples.

Update: Apparently the SVG wiki is no more. No surprise that the best references I can now (quickly) find are on StackOverflow itself.

This answer describes how to implement onclick inside the svg.

Answer 2

Use either javascript binding (Mario Menger answered that already).

If you can't or won't use the binding, you can use what xil3 answered with one modification:

Use an empty anchor tag <a href="javascript:someFunc()"></a> as the click consumer. Set it's z-index and position/size so it positioned over the svg object (for cross-browser compatibility).

Answer 3

Onclick should all be lowercase.

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