Как настроить прослушиватель кликов для тега рисунка? - PullRequest
Новая
       8

Как настроить прослушиватель кликов для тега рисунка?

0 голосов
/ 05 сентября 2018

У меня есть следующий простой HTML-документ: 

<!DOCTYPE html>
<html>
<head>
</head>

<body>
    <figure>
        <object class="" type="image/svg+xml" data="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350"></object>
    </figure>
</body>

<script>
    var figures = document.querySelectorAll('figure')
    for (let figure of figures) {
        figure.addEventListener("click", function () {
            console.log("hello")
        })
    }
</script>

</html>

Однако, когда я нажимаю на изображение, ничего не происходит. Можно ли установить прослушиватель по щелчку для тега рисунка, и если нет, какие альтернативы я могу использовать?

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018 

var figures = document.getElementsByTagName('figure');
for (let i = 0; i < figures.length; i++) {
    figures[i].onclick = function (e) {
        console.log("hello from figure: " + i);
    };
}
<figure>
  <img style="width: 100px; height: 100px;" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" />
</figure>
<br><br>
<figure>
  <img style="width: 100px; height: 100px;" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" />
</figure>
<br><br>
<figure>
  <img style="width: 100px; height: 100px;" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" />
</figure>
<br><br>
<figure>
  <img style="width: 100px; height: 100px;" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" />
</figure>
0 голосов
/ 05 сентября 2018

Проблема не в figure, а в теге object . Этот тег выполняется во вложенном контексте, который не передает события обратно родителю; поэтому, когда вы нажимаете на фигуру, загруженную объектом, он не срабатывает от внедренного объекта, никогда не достигая щелчка на вашем figure.

Тег object предназначен для запуска встроенных приложений (флэш-приложений в те времена), поэтому он имеет ненормальное поведение, подобное iframe, есть много проблем безопасности.

Вы можете использовать img для загрузки svg вместо объекта, он будет загружаться таким же образом, и это вызывает событие обратно к родителю, следовательно, вызывая щелчок по родителю figure. 

<figure>
  <img width="100" height="100" src="./path/to/img.svg">
</figure>

Ниже приведен фрагмент, показывающий различное поведение при использовании object и img для загрузки изображения, второй вызывает щелчок. 

var figures = document.querySelectorAll('figure')
for (let figure of figures) {
  figure.addEventListener("click", function() {
    console.log("hello")
  })
}
<figure>
  <figcaption>I'm an object and I don't propagate events back to my parent</figcaption>
  <object width="100" height="100" type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg"></object>
</figure>

<figure>
  <figcaption>I'm an img and I propagate events back to my parent</figcaption>
  <img width="100" height="100" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg">
</figure>
0 голосов
/ 05 сентября 2018

Вы можете добавить обработчик события click к элементу figure, как и любой другой элемент. Существует вероятность того, что ваш элемент figure отсутствует в DOM, когда ваш JavaScript запускается и пытается связать событие click. Одна вещь, которую нужно попробовать - убедиться, что ваш массив фигур возвращается так, как вы ожидаете. Другая вещь, на которую стоит обратить внимание, в цикле for of, что ваша переменная figure - это то, что вы ожидаете. 

const myFigure = document.querySelector('#myFigure');
myFigure.onclick = (evt) => {
  console.log('I was just clicked');
}
<figure id="myFigure">
  <img src="https://via.placeholder.com/350x150" />
</figure>
...