鼠标事件对象

鼠标事件对象 说明
e.clientX 返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的 Y 坐标
e.pageX 返回鼠标相对于文档页面的 X 坐标 IE9+支持
e.pageY 返回鼠标相对于文档页面的 Y 坐标 IE9+支持
e.screenX 返回鼠标相对于电脑屏幕的 X 坐标
e.screenY 返回鼠标相对于电脑屏幕的 XY坐标

  • 效果演示

    效果演示
    mousemove

  • css 源码 

    1
    2
    3
    4
    		 
    img {
        position: absolute; // **
        width: 160px;
    }

  • html 结构 

    1
    2
    3
    		 
    <div>
        <img src="img/mousemove.png" alt="">
    </div>

  • JS 原理分析 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    		 

    // 获取元素 img
    var photo = document.querySelector('img');
    document.addEventListener('mousemove', function (e) {
        // pageX  pageY
        var photoX = e.pageX + 'px';
        var photoY = e.pageY + 'px';
        // 给图片添加 style 改变 left top
        photo.style.left = photoX;
        photo.style.top = photoY;
    });