我已经导入了一个svg作为HTML中的对象:
<object data="mySVG.svg" type="image/svg+xml" id="circle">
<img src="mySVG.svg" />
</object>
，我试图在整个页面上设置一个事件监听器:
window.addEventListener('click', function(){
alert('Hello')
})
问题是对象阻塞了事件监听器，当用户单击图像时，警报没有被触发。但是当用户单击其他任何地方或其他元素时，警报就会被触发。我怎么能使它，使对象作为其他元素，不阻止事件监听器?
我尝试等待对象加载后，然后设置事件监听器，但它没有工作。
如果我用SVG标签直接将SVG导入HTML，它可以工作，但SVG太大了，它使HTML代码非常混乱。我不能使用img标签，因为我还与SVG的部分与JS进行交互。
正如我在这个代码中所看到的:https://codepen.io/Dimertuper/pen/rNJoLrK(当你点击图像外部时它会触发，在图像内部它不会)
您的<object>的行为就像<iframe>一样，就像我们不希望任何网站能够将我们的银行网站嵌入iframe并看到我们点击的位置一样，<object>具有相同的"保护"。
即使这两个页面是同源的并且可以相互通信，默认情况下它们也不会接收到来自另一个页面的任何事件。
但无论如何，您可能想要的是使SVG文档对这些事件作出反应。为此，直接在该文档上添加事件侦听器。
// Wait for the <object> to be loaded
window.addEventListener("load", (evt) => {
const objEl = document.querySelector("object");
const svgDoc = objEl.getSVGDocument();
// Now you have access to the SVG document
// you can add event listeners to it as you wish
svgDoc.addEventListener("click", (evt) => {
console.log("clicked on", evt.target.outerHTML);
});
});
不幸的是，StackSnippets的空源iframes不允许我们做现场演示，所以这里是一个在JSFiddle。
但是要注意，<object>元素最近并没有得到实现者和规范作者的太多喜爱，它可能会在将来的某个时候从标准中删除。
因此，您可能更喜欢直接使用<iframe>。此外，由于这里我们将访问加载的文档，我们可以做<object>可以做而<iframe>不能做的一件事:自动调整图像内容的大小。为此，当我们获得SVG文档时，我们获取其documentElement的BBox，并将<iframe>的width和height属性设置为BBox的属性。
// Wait for the <iframe> to be loaded
window.addEventListener("load", (evt) => {
const frameEl = document.querySelector("iframe");
const svgDoc = frameEl.getSVGDocument();
// Resize the iframe to its content's size
const bbox = svgDoc.documentElement.getBBox();
frameEl.width = bbox.width;
frameEl.height = bbox.height;
svgDoc.addEventListener("click", (evt) => {
console.log("clicked on", evt.target.outerHTML);
});
});
再次作为JSFiddle。
按OP的要求-
- 需要能够点击窗口/文档并接收警报消息，即使在点击HTML对象标签时。
我们可以通过使用CSSpointer-events: none;删除作为可点击元素的object标签来做到这一点。
object {
pointer-events: none;
}
https://codepen.io/LTFoReal/pen/NWyerZg?编辑= 1111
这个链接有问题。使用透明的div来覆盖对象图像，或者直接使用svg图像。
我检查了object元素的规格。它用于嵌入外部内容的使用。它能够加载完整的文档，你的例子是loadasimage。此元素的事件绑定可用属性是contentDocument或getSvgDocument()。在您的情况下，两者都是空的，因为它是作为svg图像加载的。
document.getElementsByTagName("object")[0].contentDocument
查看此链接了解详细信息。希望这对你有帮助。