sourcecode
1. <html>
2. <head><title>STUDENTWEBSITE</title>
3. <script language="javascript">
4. function documentClick()
5. {
6. alert("you clicked in the document");
7. }
8. function paragraphclick( value )
9. {
10. alert("YOu are clicked here");
11. if(value)
12. {
13. alert("cacel bubble");
14. event.cancelBubble=true;
15. }
16. document.onclick=documentClick;
17. }
18. </script>
19. </head>
20. <body>
21. <p onclick="paragraphclick( false )">Click here</p>
22. <p onclick="paragraphclick( true )">Click here too</p>
23. </body>
24. </html>
And when you click – click here it will display you are click here then second dialog box it will display
Your are click in the document.
And when you click- you are click here too it will display the only one dialog box like you are click here
Second dialog box it will not display because it cancel the bubble by through passing the argument true.
When you click here line: 20 it pass the argument false
And when you click here too line: 21: it passes the argument true so in the line: 11 if condition becomes true so there even. Cancel bubble become true so it is does not perform the parent. You are click in the document
![Event Bubbling | how to create the bubbling and how to create cancel the bubbling in DHTMl in javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GXmU5LEb6ZoUenkW8jpUpXyWyTEVsI9kk-CyuC0EZuEUeM4acvAFV4IALQNhzbNhMO1pDg3Li6KKp6yL_C6qrC76yteBKvcVvQ_IOwFUd-3SoLoFJyafqO2MgBv-9UchhgLzW8PwL9PV/s400/Event+Bubbling++how+to+create+the+bubbling+and+how+to+create+cancel+the+bubbling+in+DHTMl.jpg)
0 Comments