防止覆盖在点击时关闭

Question

我有一个页面，我可以在其中发送消息。 发送消息后，页面上会出现一个覆盖图。 覆盖将阻止用户点击页面上的任何地方，但当用户想要停止在客户端设备上显示消息时，他会强制用户点击按钮。

叠加层由放置在屏幕中央的一个小盒子 (300 x 200 px) 组成。 里面有一条消息和一个按钮：

<div id="box">
    <h1>ALLARME <br>IN CORSO</h1>
    <form name="fermare"><button  name="al_fermare" class="btn btn-danger">DISATTIVA</button></form>
</div>

如果用户在框 div 外单击，则不会发生任何事情（所需的行为）。 如果用户单击按钮，则覆盖将关闭并触发一些 javascript（所需的行为）。

如果用户在框内单击而不是在按钮上单击，则覆盖将关闭，但 js 显然不会被触发。 （不想要的行为）。

我有两种解决方法：

1. 在框 div 上的 click 事件上也触发 js；
2. 防止在按钮外的框中单击时发生任何事情；

我怎样才能得到第 2 点？ 这将是最好的解决方案。

触发的js如下：

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

编辑：我尝试使用 preventDefault 并返回 false ，但这些都不能作为解决方案。

document.getElementById('box').onclick = function(e){
  e.preventDefault();
}

我也试过：

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

或在这个方向上提出的答案。

编辑 2：这有效，但是是第 1 点的行为。似乎我无法触发第 2 点中描述的行为：

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

Answer 1

尝试这个：

<div id="box" onclick="return false;">
    <h1>ALLARME <br>IN CORSO</h1>
    <form name="fermare"><button  name="al_fermare" class="btn btn-danger">DISATTIVA</button></form>
</div>

Answer 2

 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>