<body style=”text-align:center;”> <input type=”text” style=”width:200px;height:30px;background:pink;margin-top:100px auto 0;”> <div style=”width:300px;height:300px;background:red;margin:0 auto;display:none;”></div><script>var input=document.getElementsByTagName(‘input’)[0];var div=document.getElementsByTagName(‘div’)[0];//第一种写法input.addEventListener(‘click’,function(event){ event=event||window.event; div.style.display=”block”; event.stopPropagation();}) document.addEventListener(‘click’,function(event){ event=event||window.event; div.style.display=”none”; event.stopPropagation();}) div.addEventListener(‘click’,function(event){ event=event||window.event; div.style.display=”block”; event.stopPropagation(); })
第二种写法
document.onclick=function(event){ event=event||window.event; div.style.display=”none”; event.stopPropagation();}input.onclick=function(event){ event=event||window.event; div.style.display=”block”; event.stopPropagation();}div.onclick=function(event){ event=event||window.event; div.style.display=”block”; event.stopPropagation();}//阻止冒泡的兼容写法function stopEvent(event){ var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容 if(window.event){ //这是IE浏览器 e.cancelBubble=true;//阻止冒泡事件 e.returnValue=false;//阻止默认事件 }else if(e && e.stopPropagation){ //这是其他浏览器 e.stopPropagation();//阻止冒泡事件 e.preventDefault();//阻止默认事件 }}</script></body>
