'onclick'不适用于带有svg图像的对象元素 [英] 'onclick' does not work on an object-element with an svg-image

问题描述

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

When I use the onclick attribute of an object-element in an html document, it does not respond to clicks.

在我的文档中，我有一个svg图像，并将其存储在 object 元素中，因为图像中有些动画会由于仅使用 img -标签.

In my document I have an svg image and store that in an object-element, since there is some animation in the image that would get lost by just using an img-tag.

在下面的简化示例中， onmouseover 可以在两个对象上使用，但是 onclick 可以在 object 上使用而没有svg-image

In the simplified example below, the onmouseover works on both objects, but the onclick just works on the object without the svg-image.

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>

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

Is there something I am doing wrong here? Or is there an alternative that does work?

针对此(以及相关问题)的答案建议在svg图像上使用 pointer-events:none 并将其包装在div中，然后将侦听器应用于该div.但是我需要svg图像来响应鼠标事件，因此无法设置 pointer-events:none .

The answers given for this (and related questions) advise to use pointer-events: none on the svg-image and wrap it in a div and apply the listeners to that div. But I need the svg-image to respond to mouse events, and therefore cannot set pointier-events: none.

推荐答案

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

After a bit of research, I found that your main issue is:

< object> 标记无法单击.(*)

(*)除非< object> 标记为空，否则其行为将与< iframe> 标记相同受CORS政策的限制，浏览器将阻止任何试图修改源的尝试.

(*)Unless the <object> tag is empty, it's behavior will be the same as an <iframe> tag, which is strictly limited by CORS policy and the browser will block any attempt to modify the source.

CORS安全策略是一种使用以下机制的机制附加的 HTTP标头来告知(或给予许可)浏览器以使用和操纵外部域内容.

The CORS security policy is a mechanism that uses additional HTTP headers to tell (or give permission) to a browser to use and manipulate the external domain contents.

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

This is a security policy because imagine this:

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

Someone has a malicious website called stackoverflow.co. And this malicious person decides to load trough an iframe the website stackoverflow.com and manipulate its content to trick users into a fake login page and when users inputs his private credentials he's not loggin into the official site, so his credentials will be stolen by the malicious site.

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

Well, CORS is the hero here. Thanks to this security policy, the remote servers can send an additional header that is seen like this: Access-Control-Allow-Origin: * and the browser determines that if any of this contents are loaded trough an <iframe> or <object> tag, any attempt to modify the contents of this should be blocked.

自2019年以来，这已成为网络上的> 标准，大多数浏览器会检测到此问题CORS标头，可防止这种利用.

Since in 2019 this is now a standard in the web, most browsers detect this CORS header and prevents this kind of exploit.

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

Well, if your issue is that you need to load the svg, the quickest solution is to load it trough an <img> tag.

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

Otherwise, there is no way you'll be able to inject, use, handle or whatever in an <object> nor <iframe> tag with the CORS header included. Except for the onload.

其他来源:

可以在此处找到曾经回答类似问题的用户.

The user who answered a similar question time ago can be found here.

这篇关于'onclick'不适用于带有svg图像的对象元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！