'onclick'不适用于带有svg图像的对象元素

Question

当我在html文档onclick中使用object-element 的属性时，它不会响应单击。

在我的文档中，我有一个svg图像，并将其存储在object-element中，因为图像中有些动画仅通过使用img-tag 就会丢失。

在下面的简化示例中，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-image上使用并将其包装在div中，并将侦听器应用于该div。但是我需要svg-image来响应mouse events，因此无法设置pointier-events: none。

Answer 1

经过一些研究，我发现您的主要问题是：

该<object>标签不能被点击。（*）

（*）除非<object>标签为空，否则其行为将与<iframe>标签相同，严格受CORS政策的限制，浏览器将阻止任何尝试修改源的尝试。

为什么？

该CORS安全策略是一种机制，使用额外的HTTP头告诉（或给予许可）的浏览器来使用和操纵外部域的内容。

这是一个安全策略，因为可以想象一下：

有人拥有一个名为的恶意网站stackoverflow.co。然后，这个恶意人员决定通过网站内嵌iframe stackoverflow.com并操纵其内容来欺骗用户进入虚假的登录页面，并且当用户输入其私人凭据时，他不会登录到官方站点，因此其凭据将被恶意站点窃取。

好吧，CORS是这里的英雄。由于采用了此安全策略，远程服务器可以发送一个附加标头，如下所示：Access-Control-Allow-Origin: *并且浏览器确定是否通过<iframe>或<object>标记加载了这些内容中的任何内容，则应禁止任何试图修改其内容的尝试。

自2019年以来，这已成为Web 的标准，因此大多数浏览器都会检测到此CORS标头并阻止这种利用。

那你该怎么办？

好吧，如果您的问题是您需要加载svg，则最快的解决方案是通过<img>标记加载它。

否则，您将无法在带有CORS标头的<object>nor <iframe>标签中进行注入，使用，处理或其他操作。除了onload。

附加来源：

在此可以找到之前回答类似问题的用户。