When you put an event in a tag, for example <p onClick="alert('You clicked a paragraph');"> which tags get and handle the event? Every tag is inside at least one (<body>) other tag, and unless a handling element explicitly deals with an event it can continue to "bubble up" to the enclosing elements. This illustrates what happens: try clicking in different places, and try it in different browsers.
The following text has its code duplicated visibly at the bottom of the page.
A. This paragraph has an onclick that does an alert. Here is some bold text which does an alert and back out of the bold.
B. This paragraph has an onclick that does an alert and returns true. Here is some bold text which does an alert and returns true and back out of the bold.
C. This paragraph has an onclick that does an alert and returns false. Here is some bold text which does an alert and returns false and back out of the bold.
D. This is in a paragraph with no handler at all.
E. This paragraph has an onclick that does an alert and then a "event.cancelBubble = true;". Here is some bold text which does an alert and then "event.cancelBubble = true;" and back out of the bold.
F. This paragraph has an onclick that does an alert and then a "event.cancelBubble = true;". Here is some bold text which does an alert (and nothing more) and back out of the bold. Note that the event bubbles from the bold and is stopped after the para.
<body onclick="alert('body got it');">
...
<p onClick="alert('para got it');">
A. This paragraph has an onclick that does an alert.
Here is some <b onClick="alert('b got it');">bold text which does an alert</b> and
back out of the bold.
</p>
<p onClick="alert('para got it');return true;">
B. This paragraph has an onclick that does an alert and returns true.
Here is some <b onClick="alert('b got it');return true;">bold text which does an alert and returns true</b> and
back out of the bold.
</p>
<p onClick="alert('para got it');return false;">
C. This paragraph has an onclick that does an alert and returns false.
Here is some <b onClick="alert('b got it');return false;">bold text which does an alert and returns false</b> and
back out of the bold.
</p>
<p>
D. This is in a paragraph with no handler at all.
</p>
<p onClick="alert('p got it');event.cancelBubble = true;">
E. This paragraph has an onclick that does an alert and then a "event.cancelBubble = true;".
Here is some <b onClick="alert('b got it');event.cancelBubble = true;">bold text which does an alert and then "event.cancelBubble = true;"</b> and back out of the bold.
</p>
<p onClick="alert('p got it');event.cancelBubble = true;">
F. This paragraph has an onclick that does an alert and then a "event.cancelBubble = true;".
Here is some <b onClick="alert('b got it');">bold text which does an alert (and nothing more)</b> and back out of the bold. Note that the event bubbles from the bold and is stopped after the para.
</p>