Orange = a graphical element
Dotted green border = able to dispatch events

What we are looking for is the target of user interaction with the webpage. By target I mean: (1) the element that dispatches the Event. (2) the element that is the target of the context menu. (3) The element that receives focus such as in text selection.

Finding the target is straightforward:

1. Look at the location of the mouse pointer.
2. Check the topmost element that is visually placed on-screen.
3. If the element is both graphical & able to dispatch events, proceed.
   Otherwise, go back to step 2 and check the next item visually below.
4. The first element that is both graphical & is able to dispatch events will then dispatch a DOM Event (it will be the Event target under DOM2).
5. Standard DOM2 Event model takes over. For example:
   1. The capture phase will go from the DOM root elment to the target element (the one that dispatched the Event).
   2. The bubble phase will go from the target elment back to the DOM root element.
   3. The element that actually dispatched the Event will be the DOM2 Event "target".

Notes:

The SVG element can NEVER dispatch events because it is non-graphical according to the SVG spec. See explanation in section 4 of my earlier mailing list post.
border, background-color/image are properties from the CSS spec and follow rules different than in the SVG spec. Technically they are not supposed to apply to svg elements.
If you apply a border or background to an svg element, it turns it into some graphical hybrid with undefined behavior.