display:none visibility,opacity區別

1、display:none
會脫離文件流，完全消失不見。

2、visibility: hidden
仍會在原來的文件流中佔據位置，但是在上面的點選事件或別的事件都不會觸發。

3、opacity: 0
仍佔據文件流，只是看不見了，在上面的事件仍會被觸發。

測試程式碼

<div style="display: none">1</div>
  <div id="box1" style="opacity: 0;">2</div>
  <div id="box2"
 
 style="visibility: hidden;">3</div>
  <script>
    var obox1 = document.getElementById("box1");
    var obox2 = document.getElementById("box2");

    obox1.onclick = function(){
      alert("box1");
    }
    obox2.onclick = function(){
      alert("box2");
    }
  </script>