Home > Developer > JavaScript
As shown, the gray block contains a red block, assuming we have a click-to-box event for each of the gray and red blocks, and when we click on the red block, we do not want to trigger the gray block of the bounding box event, which requires blocking the bubbling event.
The block bubbling event in IE uses the Cancelbubble property, which must be set to TRUE if the event handle wants to prevent the event from propagating to the containment object.
Non-IE browsers such as Firefox block bubbling events using the Stoppropagation () method. After the method is called, the handler that handles the event on that node is called, and the event is no longer dispatched to the other node.
Let's look at the code example:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Event Object--block event bubbling</title></Head><Body> <DivID= "Gray"style= "background: #ddd; width:400px;height:400px;"> <DivID= "Red"style= "background: #FF0000; width:200px;height:200px;"></Div> </Div> <Script> varOgray=document.getElementById ("Gray"); varoRed=document.getElementById ("Red"); Ogray.onclick=function() {alert ("Click on the gray block! "); } Ored.onclick=function(e) {alert ("Click on the red block! "); varEvent=e||window.event; //block bubbling events, otherwise the Ogray.onclick method will be touched if(document.all) {//IEevent.cancelbubble=true;//This property must be set to TRUE if the event handle wants to prevent the event from propagating to the containment object }Else{ //Ff,chromeevent.stoppropagation ();//no longer distributing events } } </Script></Body></HTML>
Block event bubbling in JavaScript
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
