防止覆蓋在點擊時關閉

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>