12.31

          鼠标事件
          let h1 = document.querySelector('h1');
    /* 鼠标双击 */
 h1.ondblclick = function(){
     alert('我双击了')
 }
    // h1.addEventListener('dblclick',function(){
    //     alert('我双击了')
    // })
    /* 鼠标在指定的区域内移动事件 */
    // h1.onmousemove = function (){
    //     console.log('我移动了');
    // }
    // h1.addEventListener('mousemove',function(){
    //     console.log('我移动了');
    // })
               拖拽组件
                  <div id="div1"></div>
<script>
    let div1 = document.getElementById('div1')
    div1.onmousedown = function (e){
        /* 按下的时候 获取点的位置 到盒子边界距离 */
        let areaX = e.clientX - div1.offsetLeft;
        let areaY =  e.clientY - div1.offsetTop;
        document.onmousemove = function (e){
            /* 移动的时候获取的client的动态距离 - 盒子内点的到边缘的固定距离 */
            /* 最后获得的 就是 盒子到文档的距离 */
            div1.style.left = e.clientX - areaX + 'px'
            div1.style.top = e.clientY - areaY + 'px'
        }
    }
    div1.onmouseup = function (){
        document.onmousemove = null;
    }
</script>

           右击菜单
 <div id="div1"></div>
<script>
    let div1 = document.getElementById('div1');
    document.oncontextmenu = function (e){
        e.preventDefault();
        div1.style.display = 'block';
        console.log(e.clientX);
        console.log(e.clientY);
        div1.style.left = e.clientX + 'px'
        div1.style.top = e.clientY + 'px'
    }
</script>