爲什麼html <object>元素不響應鼠標事件？

我有一個用於顯示SVG圖像的HTML <object>元素（type="image/svg+xml"）。 我試圖禁用此<object>元素上的右鍵單擊菜單，但它似乎不偵聽鼠標事件。爲什麼html <object>元素不響應鼠標事件？

我對div做了同樣的工作。

JSFIDDLE HERE

任何線索如何通過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!') 
})

來源

2016-05-04 Roco CTZ

** ['它與你的工作code'（https://jsfiddle.net/Guruprasad_Rao/qzzk7hxt/4/）** –

當我右鍵點擊這隻鳥，我希望得到一個警報，我不希望得到右鍵菜單。你是這個意思嗎？這不適合我。 –

雖然沒有任何鳥正在顯示.. –

是最好的，我可以告訴<object>元素不是"interactive content"，因此不是一個可點擊的區域。 MDN建議使用與<map>標記配對的usemap屬性，但我在使用您提供的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>

來源

2016-05-04 03:53:37 nathanallen

爲什麼html <object>元素不響應鼠標事件？

回答

相關問題