Question

当我在html文档中使用onclick元素的object属性时，它不会响应点击。

在我的文档中，我有一个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>

我在这里做错什么了吗？还是有可行的替代方法？

为this (and related questions)给出的答案建议在svg图像上使用pointer-events: none并将其包装在div中，并将侦听器应用于该div。但是我需要svg映像来响应mouse events，因此无法设置pointier-events: none。

Answer 1

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

无法点击<object>标签。（*）

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

为什么？

CORS security policy是一种机制，它使用附加的HTTP headers告诉（或授予许可）浏览器使用和操纵外部域内容。

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

某人有一个名为stackoverflow.co的恶意网站。然后，这个恶意者决定通过网站stackoverflow.com加载iframe并操纵其内容，以诱使用户进入伪造的登录页面，并且当用户输入其私人凭据时，他不会登录官方网站，因此其凭据将被盗用通过恶意网站。

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

自2019年以来，这已成为网络上的standard，大多数浏览器都会检测到该CORS标头并阻止这种利用。

那你该怎么办？

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

否则，将无法通过包含CORS标头的<object>或<iframe>标签插入，使用，处理或进行任何操作。除了onload。

其他来源：

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

Answer 2

以下代码可以解决问题：

<div id='test1'>
    <object style="pointer-events: none;" height="50px" data="https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg"></object>
</div>

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

2 个答案:

为什么？

那你该怎么办？