当我使用onclick的属性object-html 文档中的元素，它不响应点击。
在我的文档中，我有一个 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>
我在这里做错了什么吗？或者有其他有效的替代方案吗？
给出的答案这个（以及相关问题） https://stackoverflow.com/questions/25916403/how-to-bind-click-event-to-object-tag建议使用pointer-events: none放在 svg-image 上并将其包装在 div 中并将侦听器应用于该 div。但我需要 svg-image 来响应mouse events，因此无法设置pointier-events: none.
经过一番研究，我发现您的主要问题是：
The <object> tag 无法点击。 (*)
(*)除非<object>标签为空，它的行为将与<iframe>标签，受到 CORS 策略的严格限制，浏览器将阻止任何修改源的尝试。
Why?
The CORS安全策略 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS是一种使用额外的机制HTTP 标头 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers告诉（或授予权限）浏览器使用和操作外部域内容。
这是一项安全策略，因为想象一下：
有人有一个名为的恶意网站stackoverflow.co。这个恶意者决定通过 iframe 加载网站stackoverflow.com并操纵其内容来欺骗用户进入虚假的登录页面，当用户输入他的私人凭据时，他并没有登录到官方网站，因此他的凭据将被恶意网站窃取。
好吧，CORS 是这里的英雄。由于这个安全策略，远程服务器可以发送一个额外的标头，如下所示：Access-Control-Allow-Origin: *并且浏览器确定是否通过以下方式加载了任何内容<iframe> or <object>标签，任何修改其内容的尝试都应该被阻止。
自 2019 年以来，现在这是standard https://www.w3.org/TR/cors/在网络中，大多数浏览器都会检测到此 CORS 标头并防止此类利用。
那你该怎么办？
好吧，如果您的问题是需要加载 svg，最快的解决方案是通过<img> tag.
否则，你将无法在一个容器中注入、使用、处理或执行任何操作。<object> nor <iframe>包含 CORS 标头的标记。除了onload.
其他来源：
可以找到之前回答过类似问题的用户here https://stackoverflow.com/a/25916723/5568741.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
