Home > Developer > Web Develop
<%@ page language= "C #" autoeventwireup= "true" codebehind= "WebForm1.aspx.cs" inherits= "Test.webform1"%>
<! DOCTYPE html>
<title> Block JS event bubbling Pass (cancelbubble, stoppropagation) </title>
<meta name= "keywords" content= "JS, event bubbling, cancelbubble,stoppropagation"/>
<script>
function dosomething (obj, evt) {
alert (obj.id);
var e = (evt)? Evt:window.event;
if (window.event) {
E.cancelbubble = true; Stop Bubbling Under IE
} else {
E.preventdefault ();
E.stoppropagation (); Block Bubbling under other browsers
}
}
</script>
<body>
First case:
<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/>
Second case:
<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>
Effect:
First case: Click on the Orange column, alert ("Child1"), Alert ("Parent1")
Click on the Yellow section, alert ("Parent1")
Second case: Click on the gray Light Section, alert ("Child2")
Click on the rest of the section, alert ("Parent2")
That is, in the second case, using the event.cancelbubble () =true prevents the bubbling sort.
-------------------------
<body>
<table border= "1" onclick= "alert (' table ');" >
<TR onclick= "alert (' tr1111 ');" >
<td> First </td>
</tr>
<TR onclick= "Test (event);" >
<td> haha </td>
</tr>
</table>
</body>
<script type= "Text/javascript" >
function test (event)
{
Alert ("haha tr");
Event.cancelbubble = true;
}
</script>
Bubble sort, when a child element is triggered, the event is passed to the parent element at a sub-element level, and the parent element also fires the event.
So if you use Event.cancelbubble=true to prevent the event from being passed up, the bubble sort is blocked.
Block JS event bubbling Pass (cancelbubble, stoppropagation)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
