<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com"> <meta name="copyright" content="智能社 - zhinengshe.com"> <title>智能社 - www.zhinengshe.com</title> <style> div { display:none; 100px; height:200px; background:#ccc; } </style> <script> window.onload=function (){ var oBtn=document.getElementById('btn'); var oDiv=document.getElementById('div1'); oBtn.onclick=function (ev){ // alert('btn'); //事件对象event chrome IE,ev chrome FF IE9+ var oEvent=ev||event; oDiv.style.display='block'; oEvent.cancelBubble=true; }; oDiv.onclick=function (){ // alert('div'); oDiv.style.display='none'; }; document.onclick=function (){ // alert('document'); oDiv.style.display='none'; }; }; </script> </head> <body> <input type="button" value="显式隐藏" id="btn" /> <div id="div1"></div> </body> </html>
注意：一般不用取消，但注意事件对象event在浏览器的兼容问题。。。