跟随鼠标走html代码,div跟随鼠标移动

用到的三个鼠标事件:

onmousedown: 当鼠标按下

onmousemove：当鼠标移动

onmouseup：当鼠标松开

思路：动态监听鼠标位置，给div设置绝对定位(display: absolute)，在 onmousemove 事件中动态改变 div 的 left 和 top 的值。

e.clientX

e.clientY

代码：

Document

.test {

width: 50px;

height: 50px;

background: red;

position: absolute;

}

const div = document.querySelector('.test');

let isMouseDown = false; // 监听器，监听是否点击该 div 元素

div.onmousedown = (e) => {

isMouseDown = true; // 点击该 div 元素则设置监听器为 true

}

window.onmousemove = (e) => {

if(!isMouseDown) {

return;

}

div.style.left = e.clientX + 'px'; //动态获取并改变 left 的值

div.style.top = e.clientY + 'px';

}

div.on