一、鼠标事件

- click 左键单击 dblclick 左键双击

1. e.button 0表示左键 / 1表示中键键 / 2表示右键

document.onclick = function(e){
            console.log(e,button)  // 0 左键单击
        }

  document.ondblclick = function(e){
            console.log(e.button);//双击

        }

- mousedown 鼠标按下 / mouseup 鼠标抬起 （左键，中键和右键都可以触发）

1. 单击事件是包含了鼠标按下+抬起 （专指鼠标左键）

        //  e.button 0表示左键  / 1表示中键键 /  2表示右键
        document.onmousedown = function(e){
            console.log(e.button);
        }
        document.onmouseup = function(e){
            console.log(e.button);
        }

- 鼠标移入，和移出

1. mouseover / mouseout 支持事件冒泡
2. mouseenter / mouseleave 支持事件捕获（不建议使用）

        document.onmouseover = function(e){
            console.log(123);
        }
        document.onmouseout = function(e){
            console.log(123);
        }

- 鼠标移动事件 mousemove

   document.onmousemove = function(e){
             console.log(e.x);
        }

- 鼠标的坐标

1. 坐标需要通过事件对象才能拿到
2. 距离浏览器的坐标 e.clientX / e.clientY 简写：e.x e.y
3. 距离实际页面的坐标 e.pageX e.pageY
4. 距离目标源的坐标 e.offsetX e.offsetY
5. offsetLeft 距离最近的具有定位元素的距离。这个元素自身不需要定位
6. offsetTop 返回当前元素相对于 offsetParent 节点顶部边界的偏移像素值。
7. 事件禁用 pointer-events: none 让设置这个样式的标签禁用一切事件 相当于按钮上的disabled属性

        oA = document.querySelector(".a")

        oA.onmousemove = function(e){
            // 距离浏览器的距离（坐标）
            console.log(e.clientX);
            console.log(e.clientY);

            console.log(e.pageX);
            console.log(e.pageY);

            console.log(e.x); //console.log(e.clientX);的简写
            console.log(e.y);

            console.log(e.offsetX); //距离离鼠标最近的盒子的坐标
            console.log(e.offsetY);

        }