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

Question

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

我在div上也做了同样的工作。

JSFIDDLE

知道如何通过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>元素不是“互动内容”，因此不是一个可点击的区域。MDN建议将usemap属性与<map>标记结合使用，但我在使用您提供的JS方法方面没有成功。

下面是我的建议:创建一个与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>