Javascript DOM Event Cancel event bubbling

Description

Javascript DOM Event Cancel event bubbling

View in separate window 

<html>
   <head>
      <title>Event Bubbling</title>
      <script type = "text/javascript">
         function documentClick() 
         {/*ww w  . jav a 2  s .c om*/
            console.log( "You clicked in the document." );  
         }
         function bubble( e )
         {
            if ( !e )
               let e = window.event;
            
            console.log( "This will bubble." );
            e.cancelBubble = false;
         }
         function noBubble( e )
         {
            if ( !e )
               let e = window.event;

            console.log( "This will not bubble." );
            e.cancelBubble = true;
         }
         function registerEvents()
         {
            document.onclick = documentClick;                        
            document.getElementById( "bubble" ).onclick = bubble;    
            document.getElementById( "noBubble" ).onclick = noBubble;
         }
      </script>
   </head>
   <body onload = "registerEvents()">
      <p id = "bubble">Bubbling enabled.</p>
      <p id = "noBubble">Bubbling disabled.</p>
   </body>
</html>



PreviousNext

Related