Dhtml|model|object| Object |dhtml Prohibited Event:
All events will bubble to their parent element, and unless the event is blocked during bubbling, the event will be recursively floated down the hierarchy path to the Document object. To prevent an event, you must set the value of the Window.event.cancelBubble property to "true" in the event handle. Note that unless the event is prohibited, it will be handled by all the parent elements that have registered the event handle, even though it has been processed in the child element, while bubbling along the hierarchy.
Preventing event bubbling is different from the default behavior of preventing events. Some events, such as the onclick on an anchor point, have default behavior. When an anchor is clicked, its default behavior is to navigate the current window to the URL specified by its src attribute. Return "false" in the event handle, or set the Window.event.returnValue property to "false" to prevent the default behavior of the event, but not to prevent the event from bubbling up. To prevent bubbling upward, set the Window.event.returnValue property to "true" and, in contrast, prohibit event bubbling settings and prevent the default behavior of events.
The final example shows how to use event bubbling to apply a common effect to a set of elements. If you want to exclude one of the elements from this effect, simply put the following line of code from:
<span class=item>ham</span>
Modified to:
<span class=item onmouseover= "window.event.cancelBubble = true;"
onmouseout= "window.event.cancelBubble = true;" >Ham</SPAN>
It's OK.
(Examples of hyperlinks:
http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_03.htm)
Further thinking:
In some cases, you can have a onmouseover event registered on only one object, considering the following:
<div id=mydiv>
</DIV>
If you move the mouse pointer over an IMG object, the event will be fired in the following order:
Mydiv:: onmouseover
Mydiv:: onmouseout
MYIMG:: onmouseover
Moving your mouse pointer away from an IMG object will trigger the Mydiv::onmouseover event again.
Sometimes, web-makers may want to explore when the mouse pointer moves out of a Div object to implement a
Special effects. At this point, simply setting up the onmouseout event is not enough. To make this situation easier to resolve, the IE4.0 standard adds properties to the onmouseover and onmouseout events indicating the source object (formelement) and the target object (toelement). You can use these properties and container methods to identify when the mouse pointer moves out of an area.
The following example shows how to use these properties and methods:
(Examples of hyperlinks:
http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_04.htm)
<HTML>
<body id=body>
<div id=outerdiv style= "width:100px; height:50px; Background:red "
Onmouseover= "Over ()," onmouseout= "Out ();" >
</DIV>
<SCRIPT>
function over () {
var s;
s = "onmouseover:" +window.event.srcelement.id+ "from:" +
Window.event.fromelement.id+ "to:" +window.event.toelement.id;
alert (s);
}
function out () {
var s;
s = "onmouseout:" +window.event.srcelement.id+ "from:" +
Window.event.fromelement.id+ "to:" +window.event.toelement.id;
alert (s);
if (!) ( Outerdiv.contains (window.event.toElement))
The/*onmouseout event is not triggered by the mouse pointer moving from the Outerdiv object to an IMG object that borders the inside of it: The mouse pointer is really left out of the entire Outerdiv contained area (translator).
{
Alert ("Out of Now");
}
}
</SCRIPT>
</BODY>
