Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2018, 07:42
Интересующийся
Отправить личное сообщение для KolaKola Посмотреть профиль Найти все сообщения от KolaKola
 
Регистрация: 04.07.2017
Сообщений: 18

Не срабатывает клик по svg
Здравствуйте! Появился такой вопрос.
Добавляю на страницу svg изображение:

<object data="src/img/logo.svg" type="image/svg+xml" 
 class="navigation__logo">
    <img src="src/img/logo.png" alt="" class="navigation__logo">
</object>


Пытаюсь на него повесить клик:
var logo = document.getElementsByClassName('navigation__logo')[0];
   logo.addEventListener('click', function(){
       alert(123);
   });


Так же пробовал через onclick в object, не хочет срабатывать и всё)
Что я не так делаю?

Последний раз редактировалось KolaKola, 15.06.2018 в 07:59.
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2018, 11:10
Аватар для MC-XOBAHCK
Кандидат Javascript-наук
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 108

А если так:
var logo = document.querySelectorAll('.navigation__logo');

for(i=0; i<logo.length; i++) {
   logo[0].addEventListener('click', function() {
       alert(123);
   })
}
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2018, 11:19
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,894

KolaKola, а зачем <object>? Используйте просто <img>, можете обернуть в div.
Ответить с цитированием
  #4 (permalink)  
Старый 15.06.2018, 11:26
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,201

click не работает, mouseover работает....
Оборачивание в div не помогает.
<object data="https://svgontheweb.com/assets/img/bblogo-optim.svg" 
 class="navigation__logo">
    <img src="src/img/logo.png" alt=""  class="navigation__logo">
</object>
<script>
var logo = document.getElementsByClassName('navigation__logo')[0];
 //  logo.addEventListener('click', function(){
 //      alert(123);
 //  });
   logo.addEventListener('mouseover', function(){
       alert(456);
   });
</script>


svg в img - клик работает.

<img src="https://svgontheweb.com/assets/img/bblogo-optim.svg" 
 class="navigation__logo">



<script>
var logo = document.getElementsByClassName('navigation__logo')[0];
   logo.addEventListener('click', function(){
       alert(123);
   });

</script>
Ответить с цитированием
  #5 (permalink)  
Старый 15.06.2018, 11:27
Интересующийся
Отправить личное сообщение для KolaKola Посмотреть профиль Найти все сообщения от KolaKola
 
Регистрация: 04.07.2017
Сообщений: 18

MC-XOBAHCK

Спасибо! Но так тоже не срабатывает.
Еще заметил, что когда делаю дабл клик по svg в консоль вылетает ошибка от неизвестного мне sandboxed-default-document-end.js:

Uncaught TypeError: Cannot read property 'tagName' of null.
Ответить с цитированием
  #6 (permalink)  
Старый 15.06.2018, 11:39
Интересующийся
Отправить личное сообщение для KolaKola Посмотреть профиль Найти все сообщения от KolaKola
 
Регистрация: 04.07.2017
Сообщений: 18

Да, верно! mouseover срабатывает, а клик нет.
Просто, при наведении на svg заливка у неё менялась, а при клике я хотел производить действия.
В случае, если вставить svg в img, то как мне известно заливку, цвет линий и т.п. менять нельзя, могу ошибаться.

Последний раз редактировалось KolaKola, 15.06.2018 в 11:47.
Ответить с цитированием
  #7 (permalink)  
Старый 15.06.2018, 11:42
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,201

MC-XOBAHCK,
Зачем в цикле запускать создание обработчиков для logo[0] ?
Думаете, количество поможет?
Ответить с цитированием
  #8 (permalink)  
Старый 15.06.2018, 13:53
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,201

KolaKola,
Надо обработчик ставить на элементы внутри объекта.
Если у вас svg в том же домене - попробуйте такой вариант:
var logo = document.getElementsByClassName('navigation__logo')[0];
document.addEventListener('load',function(){
  logo.contentDocument.querySelector('svg').addEventListener('click', function(){
      alert(123);
  });
 });

Кроссдоменно contentDocument в object, похоже, недоступен...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Клик на "аккордеон" на внутренней срабатывает как ссылка (без раскрытия) LouDminsk jQuery 4 14.06.2017 11:18
Клик по кнопке срабатывает со второго раза, на почту приходит два одинаковых письма yatsyk Общие вопросы Javascript 4 13.10.2016 13:28
Клик по кнопке срабатывает со второго раза при первом действиии darmoid Общие вопросы Javascript 1 22.10.2014 15:45
Клик по ссылке с заданным классом не срабатывает bartonom jQuery 5 14.08.2013 11:05
Клик срабатывает без щелчка на кнопке - почему?.. deivan Events/DOM/Window 3 13.08.2012 13:42