在使用標籤內未觸發的事件

我一直在svg標籤內試驗use標籤。看起來相對簡單，我有一個在JSFiddle中工作的基本示例：https://jsfiddle.net/cneLLLqu/在使用標籤內未觸發的事件

單擊紅色方塊（在defs和use標籤外面）會生成一個消息框。點擊綠色方塊不會觸發任何點擊事件。我不明白爲什麼事件會發生在紅場而不是綠場。檢查元素一切看起來很好。

我目前使用Opera 42

2016-12-16 Justin Huskic

我應該澄清，目標是創建可重複使用多次的獨立/封裝元素。元素將會有內部事件來操縱它們的外觀。第一原則的這種測試試圖確定事件在「使用」對象內定義時爲什麼不觸發的原因。 –

你想做什麼是不可能的。從SVG 1.1規範：

一個「使用」元件的效果就好像被引用元素的內容進行了深入克隆到一個單獨的未曝光的DOM樹，其具有「使用」的要素其父母和所有'使用'元素的祖先作爲其更高級別的祖先。由於克隆的DOM樹未公開，因此SVG文檔對象模型（DOM）僅包含 'use'元素及其屬性。 SVG DOM不會將引用的元素的內容顯示爲'use'元素的子元素。

來源

2016-12-17 00:14:05

他們必須是完全獨立的，你不必使用<use>。

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect id="rect-1" fill="#D0011B" x="0" y="0" width="50" height="50" onclick="alert('rect-1 clicked!')"></rect> 
 
    <rect id="rect-2" fill="#4990E2" x="70" y="0" width="50" height="50" onclick="alert('rect-2 clicked!')"></rect> 
 
</svg>

我剛纔看到你在其他的答案，你必須將onclick處理程序添加到<use>標籤不defs元素的情況下做出的評論。

<use xlink:href="#test" x="60" y="0" onclick="alert('clicked')">

來源

2016-12-16 21:44:51

有沒有辦法將事件代碼留在被引用對象的領域內？最終這些對象將從另一個文件中引用，我寧願將代碼放在那裏。 –

我不認爲你可以，因爲實際的對象是''，另一個只是一個模板。 –

在使用標籤內未觸發的事件

回答

相關問題