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

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

本文关键字：gt 元素 响应 鼠标 事件 对象 html 为什么不 lt      更新时间：2023-09-26

我有一个HTML <object>元素，用于显示SVG图像（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!')
})

据我所知，<object>元素不是"交互式内容"，因此不是可点击的区域。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>
相关文章：