JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<input id="bt" type="button" value="点击弹出div" />
 <div id="box">
        <ul>
         <li><span>css</span></li>
         <li><span>html</span></li>
         <li><span>js</span></li>
       </ul>
 </div>

CSS

body{background-color: #eee;}
 div#box { background-color: #fff;border: 5px solid #000; width: 300px; height: 100px;display: none;}

JavaScript

document.getElementById("bt").onclick = function(){
     document.getElementById("box").style.display = "block";
 }
 
 document.getElementById("box").onclick = function(e){
     e = e || window.event;
     if(window.event){    //阻止事件冒泡
         e.cancelBubble = true;
     } else {
         e.stopPropagation();
     }
 }
 
 document.body.onclick = function(e){
     e = e || window.event;
      var target = e.target || e.srcElement;
     if(target.id === "box" || target.id === "bt") {
         return;
     } else {
         document.getElementById("box").style.display = "none";
     }
 }