如何在非根元素上注册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特有的，非标准的，可以用其他浏览器解释您的结果。