如何在非根元素上註冊keypress事件監聽器？

Question

我一直在開發基於SVG的文本編輯器，現在我想 讓這個多個實例可以在一個SVG 文件被實例化。我一直在努力實現這一目標的方式是包裝每個文本編輯器實例的DOM 表示的單親家庭， 元素（或或），然後到一個按鍵事件 監聽器附加到父元素。我遇到的問題，但是， 似乎按鍵事件只收到文檔 根。此外，對於所有瀏覽器SVG實現我已經試過了， 目標，originalTarget和explicitOriginalTarget事件屬性， 存在時，也設置文檔根目錄，所以也沒有 事件看起來有可能亂砍解決方法是在文檔根上附加一個 事件偵聽器，然後通過讀取事件的originalTarget屬性來手動調度事件 。

到目前爲止，我測試過的Firefox 3.6，鉻9，歌劇11，和蠟染 的Squiggle 1.7，用下面的測試案例：

http://stuff.echo-flow.com/svg-developers/testEventListener.svg

只有蠟染作品如預期，與矩形元素接收到按鍵事件 。在Firefox中，target，originalTarget和explicitOriginalTarget都等於根元素。在鉻 和Opera，目標被設置爲根元素，並且originalTarget和 explicitOriginalTarget是不確定的。

基本上，我想要做的是涉及按鍵事件回到 最初發射它的元素。我想如果我使用HTML上下文和嵌入式iframe，我可能會得到 這個工作;或者，如果我 在外部對象中使用iframe。但我想知道是否有一個不需要使用iframe的清潔解決方法。

此外，我想作爲一個最壞的情況下，我可以通過檢查按鍵 事件的clientX/clientY屬性，和比較，爲所有的文本編輯器組 元素的bboxes做我自己的命中 測試。但再一次，這似乎很hacky，我不知道是否有更好的方法。

Answer 1

首先，最好指定SVG版本和baseProfile您使用的SVG文件內。

到目前爲止，SVG僅支持（在規範中）those events，沒有按鍵事件。瀏覽器稍微超出了規格，所以，我們假設它是受支持的。

因此，您使用的是DOM 3事件keypress，因爲它doesn't exist in DOM 2 Events。
綜觀按鍵事件上下文的相關信息：

Event.target：聚焦元件處理的鍵事件，根元素如果沒有合適的輸入元件聚焦

聚焦不鼠標位置。在SVG 1.1規範中，不存在「可聚焦」屬性，但您可以在SVG 2.0 draft中找到它。

所以Batik使用錯誤的「按鍵事件」實現。您可以使用「鼠標懸停事件」來了解您懸停的元素，或嘗試在某些瀏覽器上是否已經可以使用「可調焦」屬性。

另外，originalTarget和explicitOriginalTarget是Mozilla特有的，非標準的，可以用其他瀏覽器解釋您的結果。