javascript - prevent overlay from closing on click -

i have page send message. when message sent overlay appears on page. overlay prevent user clicking anywhere on page force user click button when wants stop message displayed on client device.

the overlay made of small box (300 x 200 px) placed in center of screen. inside there message , button:

<div id="box">     <h1>allarme <br>in corso</h1>     <form name="fermare"><button  name="al_fermare" class="btn btn-danger">disattiva</button></form> </div> 

if user clicks outside box div nothing happens (desired behaviour). if user clicks button overlay closed , javascript triggered (desired behaviour).

if user clicks inside box not on button overlay closed js not triggered. (not desired behaviour).

i have 2 ways of solving this:

1. trigger js on click event on box div;
2. prevent happening on click in box outside button;

how can point 2? best solution.

the triggered js following:

document.forms['fermare'].elements['al_fermare'].onclick = function(event){   websocket.send("all_fine:"+messaggio_in);   return false; } 

edit: tried preventdefault , return false , these not working solution.

document.getelementbyid('box').onclick = function(e){   e.preventdefault(); } 

i tried:

document.getelementbyid('box').onclick = function(e){   return false; } 

or proposed answers in direction.

edit 2: works behaviour on point 1. seems cannot trigger behaviour described in point 2:

document.getelementbyid('box').onclick = function(e){   websocket.send("all_fine:"+messaggio_in);   return false; } 

javascript:  -----------      var myfunc = function(e){      e.stopimmediatepropagation();  }

html:  -----  <div id="box" onclick="myfunc(event)">      <h1>allarme <br>in corso</h1>      <form name="fermare"><button  name="al_fermare" class="btn btn-danger">disattiva</button></form>  </div>