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>