拖拽及鼠标跟随div运动

最新推荐文章于 2025-04-19 18:12:53 发布

夕阳下美了剪影

最新推荐文章于 2025-04-19 18:12:53 发布

阅读量558

点赞数

文章标签： clientX clientY event对象

本文链接：https://blog.youkuaiyun.com/qq_38401285/article/details/79709668

版权

本文通过示例介绍了如何使用JavaScript实现鼠标跟随div运动以及拖拽div的效果。利用event.clientX和event.clientY获取鼠标在可视区的位置，并结合scrollLeft和scrollTop调整div的位置。在鼠标按下时记录初始偏移量，鼠标移动时更新div的位置，鼠标释放时解除事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚看了一下事件对象，即是event对象，表示当一个对象发生事件时，与这个对象相关的一些详细信息会保存到event对象中，以方便这个对象调用。低版本IE、chrome和标准浏览器的事件对象不一样。在低版本IE、chrome下，event是一个内置的全局对象;而在标准的浏览器中，事件函数的第一个参数默认为时间对象，为了兼容这些浏览器的差异，一般做一个兼容处理：

document.οnclick=function(ev){

var ev = ev || event;

..........

}

event对象常用的两个属性有clientX、clientY，不带有单位

clientX表示可视区下鼠标的位置到左侧的距离，clientY表示在可视区下鼠标位置到顶部的距离。

下面做两个小例子实践一下：

1、鼠标跟随div运动，主要使用event.clientX和event.clientY，再赋值给div的left和top

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event对象</title>
<style>
#div1{
width: 100px;
height: 100px;
background:red;
position: absolute;
}
</style>
</head>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
document.οnmοusemοve=function(ev){
var ev=ev||event;
var scrollLeft=document.documentElement.scrollLeft+document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop+document.body.scrollTop;
oDiv.style.left=ev.clientX+scrollLeft+'px';
oDiv.style.top=ev.clientY+scrollTop+'px';
}
}
</script>
<body style='height:2000px'>
<div id="div1"></div>
</body>

</html>

2、鼠标拖拽div

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#div1{ width: 100px;height: 100px;background: red;position: absolute; }
</style>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
oDiv.οnmοusedοwn=function(ev){
var ev=ev||event;
var disX=ev.clientX-this.offsetLeft;
var disY=ev.clientY-this.offsetTop;
document.οnmοusemοve=function(ev){
var ev=ev||event;
oDiv.style.left=ev.clientX-disX+'px';
oDiv.style.top=ev.clientY-disY+'px';
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}

}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>

</html>

动态效果在这很难展现出来~