Warum reagiert html <object> nicht auf Mausereignisse?

Question

Ich habe ein HTML <object> Element, das für die Anzeige eines SVG-Bildes (type="image/svg+xml") verwendet wird. Ich versuche, das Rechtsklickmenü auf diesem <object> Element zu deaktivieren, aber es scheint, dass es nicht auf die Mausereignisse wartet.

Ich habe das gleiche mit einem div getan und es funktioniert.

JSFIDDLE HERE

Jede Ahnung, wie diese CSS über Javascript/jQuery/behandeln? Bitte beachten Sie, dass ich <object> für die Anzeige der SVG verwenden muss.

Mein 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!') 
}) 

Answer 1

so gut wie ich kann sagen, das <object> Element nicht "interactive content" ist und daher kein klickbaren Bereich. MDN schlägt vor, ein usemap-Attribut zu verwenden, das mit einem <map>-Tag gepaart ist, aber ich war bei dieser Methode mit der von Ihnen bereitgestellten JS-Fiddle nicht erfolgreich.

Hier ist, was ich empfehle: Erstellen Sie eine Überlagerung zu Ihrem Svg-Objekt (in diesem Fall dehne ich nur eine <div> über die gesamte Seite). Dann erfassen und deaktivieren Sie die contextmenu Ereignis:

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