Как добавить обработчик JavaScript onClick для встроенного html-объекта?

Question

Я пытаюсь добавить обработчик onClick для встроенного объекта. Обработчик должен выполнить функцию, которая находится во внешнем файле .js, который связан с текущим html-файлом через <script src="....

Нужно ли ссылаться на функцию по-другому из-за ее нахождения в другом месте?

Вот код в текущем состоянии (который не работает, но и не выдает ошибок):

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

Answer 1

Вы должны реализовать onclick внутри svg и связать его с внешней функцией JavaScript, используя JavaScript внутри svg. См. Вики SVG для примеров.

Обновление: по-видимому, SVG-вики больше нет. Не удивительно, что лучшие ссылки, которые я могу теперь (быстро) найти, находятся в самом StackOverflow.

Этот ответ описывает, как реализовать onclick внутри svg .

Answer 2

Использовать привязку javascript ( Марио Менгер уже ответил).

Если вы не можете или не будете использовать привязку, вы можете использовать ответ xil3 с одной модификацией:

Используйте пустой тег привязки <a href="javascript:someFunc()"></a> в качестве потребителя клика. Установите его z-index и position / size, чтобы он располагался над объектом svg (для кросс-браузерной совместимости).

Answer 3

Onclick все должны быть строчными.

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