// Stop the bubble action. // you can call the action in the onxxx event of the control to prevent the parent control from responding to messages.
Dom. stopbubble = function (E)
{
// If an event object is input, it is a non-IE browser.
If (E & E. stoppropagation ){
// Therefore, it supports the W3C stoppropation () method.
E. stoppropagation ();
}
Else {
// Otherwise, we must use IE to cancel event bubbling.
Window. event. cancelbubble = true;
}
}//
From Dom Document Object Model-version 2010. CHM
<HTML>
<Head>
<Title> prevent bubbling-Kang Dong </title>
<Style>
Body {
Color: #333;
Font-size: 12px;
}
</Style>
</Head>
<Body>
<P> what is event bubbling? In general, we add a click event to the body of the page and add a click event to the Li element of the page .. when you click Li. <br>
The body event will also be triggered ..... because Li is included in the Body element... you clicked Li and also clicked body... this is event bubbling .... <br/>
In some cases, we want to prevent this situation from happening... that is, clicking the Li event will not trigger the body event... this is called blocking bubbles!
<Div id = "A">
<Ul id = "Lia"> click the list below. The body event is triggered.
<Li> Project 1 </LI>
<Li> Project 2 </LI>
<Li> Project 3 </LI>
</Ul>
<Ul id = "lib"> click the list below. The body event is not triggered.
<Li> Project 1 </LI>
<Li> Project 2 </LI>
<Li> Project 3 </LI>
</Ul>
</Div>
<Script language = "JavaScript">
Document. Body. onclick = function () {// first bind a click event to the body Element
Alert ("body event"); // click the page to bring up the dialog box
}
Function att_event () {// Bind The onclick event to the first group of Li Elements
VaR li = Document. getelementbyid ("Lia"). getelementsbytagname ("Li ");
For (VAR I = 0; I <li. length; I ++ ){
Li [I]. onclick = function (){
Alert ("Li event ");
}
}
}
Function att_event_ B () {// Bind The onclick event to the second group of Li Elements
VaR li = Document. getelementbyid ("lib"). getelementsbytagname ("Li ");
For (VAR I = 0; I <li. length; I ++ ){
Li [I]. onclick = function (e ){
Alert ("Li event ");
Stopbubble (E );
}
}
}
Function stopbubble (e ){
// If an event object is input, it is a non-IE browser.
If (E & E. stoppropagation ){
// Therefore, it supports the W3C stoppropation () method.
E. stoppropagation ();
}
Else {
// Otherwise, we must use IE to cancel event bubbling.
Window. event. cancelbubble = true;
}
}
Window. onload = function (){
Att_event ();
Att_event_ B ();
}
</SCRIPT>
</Body>
</Html>
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
