HTML |
CSS |
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id = "div1"> <p>Div 1</p> </div> <div id = "div2"> <p>Div 2</p> </div> </body> </html> |
#div1 {
background-color: black; display: inline-block; } #div2 { background-color: purple; padding: 20px 20px 20px 20px; margin: 10px auto; display: inline-block; } |
HTML
|
Javascript
|
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id = "div1"> <p>Div 1</p> <div id = "div2"> <p>Div 2</p> </div> </div> </body> </html> |
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2'); var clickHandler = function divClickHandler(event) { alert(this.id); event.stopPropagation(); //stops div2 from executing its function event.preventDefault(); //let's say there is URL and you want to prevent someone accessing it, you need to use event.preventDefault(); }; div1.addEventListener('click', clickHandler, true); div2.addEventListener('click', clickHandler, true); |