javascript - Onclick location specifics -

i need javascript/css/html. have created small dialog forms, so:

#greyout{ background-image:url('../res/greyout.png'); display:none; width:100%; height:100%; position:absolute; left:0; top:0; z-index:10; } .forms{  width:20%; position:absolute; top:20%; left:40%; right:40%; display:none; height:30%; border: 1px solid black; background-color:white; color:black; text-align:center; } 

the form divs within greyout div in html. moreover, have button triggers function:

function login() {     document.getelementbyid("greyout").style.display="block";     document.getelementbyid("loginform").style.display="block"; } function signup() {     document.getelementbyid("greyout").style.display="block";     document.getelementbyid("signupform").style.display="block"; } 

i want make sure when press greyed out background, dialog classed "forms" disappear greyout of page. trying make onclick event greyout div made pressing on dialog itself, trigger. need listen when user has pressed in background. in advance.

this expected event bubbles dom tree. try listen onclick on outer , inner div, if inner 1 clicked return false cancel event bubbling , keep current listener outer div.