CancelBubble

event.cancelBubble = false

false (default)
Bubbling is enabled, allowing the next event handler in the hierarchy to receive the event.

true
Bubbling is disabled for this event, preventing the next event handler in the hierarchy from receiving the event.

Using this property to cancel bubbling for an event does not affect subsequent events.

A typical example of this would be having a link in a table cell where the table cell, or row, had an onclick event assigned to it

The table below contains one table row with two cells.
The table row, the left cell, and the two links, contain an onclick event that will alert which was clicked.

To see this example do the following:

Action	Result
1) Select a link 2) Click in the left cell 3) Click in the right cell	You get 3 alerts You get 2 alerts You get one alert

Cell 1 Link 1 Link 2

Cell 2 <table> <tr valign="top" onclick="alert('The row was clicked')"> <td onclick="alert('The cell was clicked')">Cell 1 <a href="#null" onclick="alert('The link 1 was clicked')">Link 1</a> <a href="#null" onclick="alert('The link 2 was clicked')">Link 2</a> </td> <td>Cell 2</td> </tr> </table>

Notice that when a link is clicked the td onclick and the tr onclick event are also fired.
If the left td cell is clicked the tr onclick event is also fired.
If the right td is clicked only the tr onclick event is fired (because this cell has not been assigned an event).

The following table is identical to the above but the onclick events for cell 1 and the links include event.cancelBubble=true
Now only the selected event is fired.