为什么 html <object> 元素不响应鼠标事件？

Question

我有一个 HTML <object> 元素，用于显示 SVG 图像 (type="image/svg+xml")。 我试图禁用此 <object> 元素上的右键单击菜单，但它似乎不监听鼠标事件。

我对 div 做了同样的事情，它正在工作。

知道如何通过 Javascript/jQuery/CSS 处理这个问题吗？请注意，我必须使用 <object> 来显示 SVG。

我的代码：

var url = "https://css-tricks.com/wp-content/uploads/2015/05/kiwi.svg";

var svg = document.createElement("object");
svg.setAttribute("id", "svg1");
svg.setAttribute("type","image/svg+xml");
svg.setAttribute("data",url);
document.body.appendChild(svg)

//not responding
svg.addEventListener("contextmenu", function(event) {
  event.preventDefault();
  alert('Right-click captured!')
});

//working just fine
var div = document.getElementById("div1");

div.addEventListener("contextmenu", function(event) {
  event.preventDefault();
  alert('Right-click captured!')
})

Answer 1

据我所知，<object> 元素不是 "interactive content"，因此不是可点击区域。 MDN 建议使用 usemap 属性与 <map> 标签配对，但我使用您提供的 JS Fiddle 在这种方法中没有成功。

这是我的建议：创建一个适合您的 svg 对象的叠加层（在这种情况下，我只是在整个页面上拉伸 <div>）。然后，捕获并禁用 contextmenu 事件：

<object type="image/svg+xml" data="https://css-tricks.com/wp-content/uploads/2015/05/kiwi.svg"></object>

<div style="position:absolute;top:0;left:0;bottom:0;right:0;" oncontextmenu="return false;"></div>

为什么 html <object> 元素不响应鼠标事件？

Why isn't html <object> element responding to mouse events?

html

javascript

mouse

jquery

svg