我已將 svg 作為 HTML 中的物件匯入：
<object data="mySVG.svg" type="image/svg xml" id="circle">
<img src="mySVG.svg" />
</object>
我正在嘗試在整個頁面上設定一個事件監聽器：
window.addEventListener('click', function(){
alert('Hello')
})
問題是該物件阻塞了事件偵聽器，并且當用戶單擊影像時不會觸發警報。但是當用戶點擊其他任何地方或其他元素時，就會觸發警報。我怎樣才能使物件充當其他元素并且不會阻塞事件偵聽器？
我嘗試在加載物件后等待，然后設定事件偵聽器，但它沒有用。
如果我將 SVG 直接匯入帶有 svg 標簽的 HTML 中，它可以作業，但是 svg 會很大，這會使 HTML 代碼變得非常混亂。我也不能使用 img 標記，因為我稍后還要使用 JS 與 SVG 的某些部分進行互動。
正如在我制作的這個codepen中可以看到的那樣：https ://codepen.io/Dimertuper/pen/rNJoLrK （當您單擊它觸發的影像外部時，它不會觸發影像內部）
uj5u.com熱心網友回復：
嘗試這個：-
document.addEventListener('click', function(){ alert('Hello') })
“檔案”和“視窗”是有區別的。Document 用于訪問網頁上的任何 html 元素，而 window 代表瀏覽器的框架。因此，當您使用“視窗”單擊按鈕（html 元素）時，它不起作用。您可以在此處查看檔案和視窗之間的差異： https ://www.geeksforgeeks.org/differences-between-document-and-window-objects/
uj5u.com熱心網友回復：
根據 OP 的要求 -
- 需要能夠單擊視窗/檔案并在單擊 HTML 物件標記時接收警報訊息。
我們可以通過使用 CSS 將 object 標簽作為可點擊元素移除來做到這一點pointer-events: none;。
object {
pointer-events: none;
}
https://codepen.io/LTFoReal/pen/NWyerZg?editors=1111
uj5u.com熱心網友回復：
此鏈接已解決。使用透明 div 覆寫物件影像，或直接使用 svg 影像代替。
我檢查了物件元素的規范。它用于嵌入的外部內容使用。所以它有能力加載一個完整的檔案，你的案例是作為影像加載的。對此元素進行事件系結的可用屬性是 contentDocument 或 getSvgDocument()。在你的情況下兩者都是空的，因為它是作為 svg 影像加載的。
document.getElementsByTagName("object")[0].contentDocument
檢查此鏈接以獲取詳細資訊。希望這對您有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/489213.html
標籤：javascript html 目的 svg 添加事件监听器
上一篇：如何正確按下按鍵？