I am developing a text editor based on SVG, and now I'm trying to make it so that multiple instances can be created in one SVG document. The way I tried to achieve this was to wrap the DOM representation of each instance of a text editor with a single parent element (or), and then attach a key-click event to the listener of that parent element. The problem I am facing seems to be that keystroke events are only accepted by the root document. In addition, for all browser SVG implementations I tried, target, originalTarget, and explicitOriginalTarget, when they exist, are also installed in the document root directory, so it is not an event like an opportunity to crack the solution by adding one event listener in the document root directory. and then manually dispatching events,by reading the originalTarget property of the event.
So far I have tested Firefox 3.6, Chromium 9, Opera 11 and Batik Squiggle 1.7, with the following test case:
http://stuff.echo-flow.com/svg-developers/testEventListener.svg
Only Batik works as expected with a direct access element receiving a keypress event. In Firefox, target, originalTarget, and explicitOriginalTarget are equal to the root element. In Chrome and Opera, the target parameter is set to the root element, while originalTarget and explicitOriginalTarget are undefined.
Basically, what I'm trying to do is bind the keypress event to the element that originally shot it. I think I could get this to work if I used the HTML context and inline frames; or, if I use an iframe inside a foreignObject. But I am wondering if there is a more efficient workaround that does not require the use of an iframe.
In addition, I think that in the worst case, I could do my own hit testing by checking the clientX / clientY properties of the keystroke event and comparing this with the bbox of all groups of text editors elements. But again, this seems very hacked, and I wonder if there is a better approach.