JS DOM 鼠标事件操作

一、禁止鼠标右键点击

        contextmenu

        document.addEventListener('contextmenu', function (e) {
            e.preventDefault(); // 结果：鼠标右键点击没反应 阻止了默认行为
        })

二、禁止选中文字

        selectstart

        document.addEventListener('selectstart', function (e) {
            e.preventDefault(); // 结果：鼠标左键在文字上拖动时不能选中
        })

三、返回鼠标坐标

        1.client

        e.clientX 返回鼠标的横坐标

        e.clientY 返回鼠标的纵坐标

        注意时鼠标在可使区域内的坐标值，上下滚动但是鼠标位置不变的话坐标也是不变的。

        2.page

        e.pageX 返回鼠标的横坐标

        e.pageY 返回鼠标的纵坐标

        此时坐标值为真个页面的坐标值，会随着页面的滚动而变化

        3.screen

        e.screenX 返回鼠标与显示器左侧的距离

        e.screenY 返回鼠标与显示器上边的距离

四、鼠标移动事件

        mousemove       

        var img = document.querySelector('img'); // 取图片为元素
        document.addEventListener('mousemove', function (e) { // 只要鼠标移动就会触发
            img.style.left = e.clientX + 'px'; // 把鼠标的当前位置坐标赋给img让其跟随鼠标移动
            img.style.top = e.clientY + 'px';
        })