'onclick' не работает с объектом-элементом с svg-изображением
Когда я использую атрибут onclick элемента object в html-документе, он не реагирует на клики.
В моем документе у меня есть изображение svg, и я сохраняю его в элементе object, так как в изображении есть некоторая анимация, которая будет потеряна при простом использовании тега img.
В приведенном ниже упрощенном примере onmouseover работает с обоими объектами, но onclick работает только с object без svg-изображения.
document.getElementById('test1').onmouseover = hover;
document.getElementById('test1').onclick = click;
document.getElementById('test2').onmouseover = hover;
document.getElementById('test2').onclick = click;
function hover() { alert('Hovered');};
function click() { alert('Clicked');};<object id='test1' data = "https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg" height = "50px"></object>
<object id='test2' height = "50px" border = "1px solid black">some object</object>Есть ли что-то, что я делаю неправильно здесь? Или есть альтернатива, которая работает?
Ответы, данные для этот (и сопутствующие вопросы), советуют использовать pointer-events: none на svg-изображении, обернуть его в div и применить прослушиватели к этому div. Но мне нужно, чтобы svg-изображение отвечало на mouse events, и поэтому я не могу установить pointier-events: none.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
После небольшого исследования я обнаружил, что ваша основная проблема:
The
<object>tag can not be clicked. (*)
(*) Если тег <object> не пуст, его поведение будет таким же, как у тега <iframe>, что строго ограничено политикой CORS, и браузер будет блокировать любую попытку изменить источник.
Почему?
Политика безопасности CORS — это механизм, который использует дополнительный HTTP-заголовки, чтобы указать (или дать разрешение) браузеру использовать и управлять содержимым внешнего домена.
Это политика безопасности, потому что представьте себе это:
У кого-то есть вредоносный веб-сайт под названием stackoverflow.co. И этот злоумышленник решает загрузить через iframe веб-сайт stackoverflow.com и манипулировать его содержимым, чтобы обмануть пользователей на поддельной странице входа, и когда пользователи вводят свои личные учетные данные, он не входит на официальный сайт, поэтому его учетные данные будут украдены вредоносным сайтом. .
Ну, CORS здесь герой. Благодаря этой политике безопасности удаленные серверы могут отправлять дополнительный заголовок, который выглядит следующим образом: Access-Control-Allow-Origin: * и браузер определяет, что если какое-либо из этого содержимого загружается через тег <iframe> или <object>, любая попытка изменить его содержимое должна быть заблокирован.
Поскольку в 2019 году это стандартный в сети, большинство браузеров обнаруживают этот CORS-заголовок и предотвращают подобные эксплойты.
Итак, что нужно сделать?
Что ж, если ваша проблема заключается в том, что вам нужно загрузить svg, самое быстрое решение — загрузить его через тег <img>.
В противном случае вы не сможете внедрить, использовать, обрабатывать или что-то еще в теге <object> или <iframe> с включенным заголовком CORS. Кроме onload.
Дополнительные источники:
Пользователя, ответившего на аналогичный вопрос некоторое время назад, можно найти здесь.
Кроме того, не добавляйте шума, например, поясняйте, почему вопрос не является обманом, просто сосредоточьтесь на ответе.
Следующий код должен помочь:
<div id='test1'>
<object style = "pointer-events: none;" height = "50px" data = "https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg"></object>
</div>
Почему минус?
Спасибо за комментарий. Если вы посмотрите на мой код, вы увидите, что элемент объекта заключен в элемент div, поэтому все внутри него будет реагировать на pointer-events. Я предполагаю, что вы не пробовали мой код до того, как проголосовали против. Я надеюсь, что вы попробуете это, так вы станете мудрее и сделаете stackoverflow лучше. Спасибо!
Но svg-изображение по-прежнему больше не будет реагировать на события мыши, даже на события наведения!
Вы можете протестировать код здесь: jsfiddle.net/tvrxekbf
Я знаю, что ваше решение работает для этого примера. Но изображение svg, которое я использую, также использует javascript и css и, таким образом, реагирует на события мыши. Это больше невозможно, если для событий-указателей установлено значение none.
Это дубликат, и по причине
<object>не может бытьclickсобытия. Неважно, используете ли вы jQuery или обычный javascript.