Re: event bubbling and focusHighlight

On Tue, 17 Jun 2008 16:51:54 +0200, Jonathan Chetwynd  
<j.chetwynd@btinternet.com> wrote:

> Erik,
>
> thanks for the rapid response,
> my concern is that when navigating with the keyboard the
> focusHighlight surrounds the element with focus in each case.
> however when using the mouse, the focusHighlight surrounds the
> descendent clicked, when this has not been set to be focusable
> directly, rather than the element which was set to monitor focus events.
> there is an additional issue that 7 alert dialogues are raised on the
> middle element, why might this might be?

I think that it is because the SVGElementInstances share the event  
listener list with the use element they belong to[1]. Essentially this  
means that because you register an event listener (with the onfocusin  
attribute) on the 'use' element, you "register" event listeners on each of  
the elements in the conceptually cloned tree (the elements referenced by  
the 'use'). The event handler will therefore be called 7 times in the  
example (since there are 6 levels of nesting, and the use element listener  
will be invoked once), and they will have different currentTarget:s. If  
you are only interested in the events on the 'use' element, then adding  
for example "if(e.currentTarget instanceof SVGUseElement)" will ensure  
that. Note that event.target will be the element to which the event was  
first sent, and it should stay the same during the event bubbling and  
should always be an SVGElementInstance if the event originated from a  
conceptually cloned tree.

> on a related issue, is it the case that title content is always that
> of the child, where there is a choice?

The innermost hit element with a title is the one you will see as a  
tooltip yes.

> eg the fruit all have title fruit but this isn't displayed in the
> tooltip.
>
> evidently one workaround for these issues is to include a transparent
> top layer, possibly shaped where necessary to the underlying parts.
> however this solution lacks elegance.

The use of "event shields" (made of invisible rects for example) is not  
uncommon in interactive svg content I've seen so far.

Cheers
/Erik

[1] http://www.w3.org/TR/SVG11/struct.html#UseElement

-- 
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Received on Wednesday, 2 July 2008 10:00:50 UTC