Как добавить обработчик 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 больше не существует. Не удивительно, что лучшие ссылки, которые я могу теперь (быстро) найти, находятся на самом Stackru.

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

Answer 2

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

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

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

Answer 3

Если вы хотите вызвать метод из встроенного объекта, вы можете сделать что-то вроде этого. Используйте в качестве embedsrc.html следующее:

    <img src="svg/button.svg" width="95" height="53" 
    onClick="window.parent.buttonEvent('buttonClicked')"/>

а затем добавьте это в свой основной html:

    <embed src="embedsrc.html" width="95" height="53"> </embed>

    <script type='text/javascript'>
    function buttonEvent(input){alert(input);}
    </script>

Answer 4

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

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