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

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

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

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

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

3 ответа

Решение

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

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

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

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

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

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

Если вы хотите вызвать метод из встроенного объекта, вы можете сделать что-то вроде этого. Используйте в качестве 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>

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

<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53" 
type="image/svg+xml" onclick="alert('hello!');"/>
Другие вопросы по тегам