This document should help explain the desired behavior more clearly, by using visual examples of various situations.

---

Legend:
DOM = the layout of the elements in the DOM:
Orange = a graphical element
Dotted green border = able to dispatch events

Layers: assume that each element is layered on top of the other.
Example: view the source for the exact html code. Note that the examples do not render properly in this html file.

---

Each example shows the target element 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 in the SVG namespace) AND (the element is both graphical & able to dispatch events): proceed to step 4.
   IF (the element is in another namespace, like html): follow the rules for that namespace to figure out if that element can trigger an event. CSS is rather vague on how this is handled; most browsers trigger events only if the box graphically renders content on-screen; other browsers will trigger an event on blank, no-content boxes.
   IF (no triggerable element found): go back to step 2 and check the next item visually below.
4. From the matching element, dispatch a DOM Event (this element will be the Event target under DOM2).
5. Standard DOM2 Event model takes over. For example:
   • The capture phase will go from the DOM root elment to the target element (the one that dispatched the Event).
   • The bubble phase will go from the target elment back to the DOM root element.
   • The element that actually dispatched the Event will be the DOM2 Event "target".