用鼠标右键快速创建一个框

在红色的区域右键就可快速的创建一个框 而在红色区域外的地方左键就可删除这个框

<style>
        .menu{
            width:100px ;
            height: 150px;
            background: plum;
            position: absolute;
        }
    </style>
    
    <div id="demo" style="width: 300px; height: 300px;
        background: red;">
    </div>
     <script>
        let demo = document.querySelector('#demo')
         demo.oncontextmenu = function(e){
            e.preventDefault()
            let menu = document.querySelector('.menu')
            if(menu) menu.remove()
            menu = document.createElement('div')
            menu.classList.add('menu')
            let  menu1 = document.createElement('div')
            menu1.innerHTML='xxxxx'
            menu.appendChild(menu1)
            document.body.appendChild(menu)
            menu.style.left = e.pageX + "px"
            menu.style.top = e.pageY + "px"
        }

        window.onclick = e => {
            let menu = document.querySelector('.menu')
            if(menu && !menu.contains(e.target));
              menu.remove()
        }
    </script>
    ```