Question

我有以下简单的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>

但是，当我单击图像时，什么也没有发生。可以为数字标签设置点击监听器吗？如果没有，我可以使用哪些替代方法？

Answer 1

问题不是figure，而是object tag。该标记在嵌套的上下文中运行，该上下文不会将事件传播回父级。因此，当您单击由对象加载的图形时，它不会从嵌入的对象回射，永远不会达到您对figure的单击。

object tag旨在运行嵌入式应用程序（以前的Flash应用程序），因此它具有类似于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>

Answer 2

您可以像其他任何元素一样，将点击事件处理程序添加到figure元素中。当您的JavaScript运行并尝试绑定click事件时，图元素有可能不在DOM中。尝试做的一件事是确保您的图形数组能按预期返回。另一件事要看的是在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>

Answer 3

| sent |
|------|
|    8 |

var figures = document.getElementsByTagName('figure');
for (let i = 0; i < figures.length; i++) {
    figures[i].onclick = function (e) {
        console.log("hello from figure: " + i);
    };
}

如何设置人物标签的点击监听器？

3 个答案: