Javascript 为什么不是'；t html<；对象>；元素响应鼠标事件？

我有一个HTML

元素，用于显示SVG图像（

type=“image/SVG+xml”

）我试图禁用此

元素上的右键单击菜单，但它似乎没有侦听鼠标事件

我对一个

div做了同样的操作，它正在工作


如何通过Javascript/jQuery/CSS处理这个问题？请注意，我必须使用
来显示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!')
})

据我所知，
元素不是，因此不是可单击的区域。MDN建议使用
usemap
属性和
标记，但我使用您提供的JS FIDLE在这种方法中没有成功

下面是我的建议：为svg对象创建一个覆盖图（在本例中，我只是在整个页面上拉伸一个
）。然后，捕获并禁用
上下文菜单
事件：

<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>


当我右键单击鸟时，我希望得到一个警报，但我不希望得到右键单击菜单。这就是你的意思吗？它对我不起作用。但是没有显示任何鸟。
oncontextmenu=“return false”
也会禁用滚动。有没有办法禁用上下文菜单，但保留滚动功能？