HTML and CSS Reference
In-Depth Information
Figure 15.35
The user clicked on the link first, and it bubbled up from there for each
element. The body element was last and at the top of the bubbling chain.
Stopping or Cancelling the Event Flow.
The W3C event model allows you to
cancel or stop the flow of a set of events from happening. In the last example, once you
clicked on the link, the next click event happened, and so on, until the last element, the
body
, was reached. In the next example, the bubbling is stopped with the
stopPropaga-
tion()
event method, a method provided to stop bubbling in W3C compliant browsers.
Some event methods are given in Table 15.7.
Table 15.7
Event Methods
stopPropagation()
Prevent further propagation of an event during event flow.
preventDefault()
Cancels the event if it is cancelable, meaning that any default
action normally taken when the event happens, will not occur.
initEvent(eventType,
isBubble, isCancelable)
Event type such as click, mousedown, and so on. Boolean true or
false to determine event's default event flow, bubble or cancel.
The
cancelBubble
Property (Internet Explorer).
If using Internet Explorer, this
is how you would cancel the bubbling in Example 15.19 with the
cancelBubble
property.
If set to
true
this property disables bubbling for this event, preventing the next event in
the hierarchy from receiving the event.
event.cancelBubble = true;
EXAMPLE
15.19
<html>
<title>Bubbling Cancelled</title><head>
<script type="text/javascript">
1
var d1,p1,p2,a1;
2
window.onload=function(){
3
b1=document.getElementById('bdy1');
Continues
