Why isn't html <object> element responding to mouse events?
<p>I have an HTML <code>&lt;object&gt;</code> element which is used for displaying an SVG image (<code>type="image/svg+xml"</code>). <strong>I am trying to disable the right-click menu on this <code>&lt;object&gt;</code> element</strong>, but it appears that it doesn't listen for the mouse events.</p>

<p>I have done the same with a <code>div</code> and it's working.</p>

<p><strong><a href="https://jsfiddle.net/qzzk7hxt/3/" rel="nofollow">JSFIDDLE HERE</a></strong></p>

<p>Any clue how to handle this via Javascript/jQuery/CSS? Please note that I must use <code>&lt;object&gt;</code> for displaying the SVG.</p>

<p>My code:</p>

<pre><code>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!')
})
</code></pre>