Cancelbubble is effective under IE
Stoppropagation is effective under Firefox
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> prevent JavaScript event bubbling (cancelbubble, stoppropagation) </title>
<meta name= "keywords" content= "JavaScript, event bubbling, cancelbubble,stoppropagation"/>
<script type= "Text/javascript" >
function DoSomething (obj,evt) {
alert (obj.id);
var e= (evt) evt:window.event;
if (window.event) {
E.cancelbubble=true;
} else {
E.preventdefault ();
E.stoppropagation ();
}
}
</script>
<body>
<div id= "Parent1" onclick= "alert (this.id)" style= "Width:250px;background-color:yellow" >
<p>this is Parent1 div.</p>
<div id= "Child1" onclick= "alert (this.id)" style= "Width:200px;background-color:orange" >
<p>this is child1.</p>
</div>
<p>this is Parent1 div.</p>
</div>
<br/>
<div id= "Parent2" onclick= "alert (this.id)" style= "Width:250px;background-color:cyan"; >
<p>this is Parent2 div.</p>
<div id= "child2" onclick= "dosomething (this,event);" style= "width:200px;background-color:lightblue;" >
<p>this is child2. Would bubble.</p>
</div>
<p>this is Parent2 div.</p>
</div>
</body>
