如何解决Javascript鼠标事件侦听器-元素跳开并且不能正确跟随鼠标
晚上好,
我有一个问题,我已经解决了 2 天了,但一直无法解决。我会马上处理的。
我在一个容器元素中有几行相同类的元素。目标是在任何行上单击并按住 mousedown,然后用鼠标在屏幕上移动它们。问题是,在第一行之后,当尝试移动所述元素时,元素开始从鼠标中大量掉落。
这不仅是容器元素内同一类元素的问题,而且每当我尝试鼠标按下并移动不是文档中第一个元素的任何元素时,我也会发现这个问题。这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<style>
#container{
display:inline-block;
border: 2px black solid;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
}
.rows{
border: 1px red solid;
width: 50px;
height: 50px;
margin-bottom: 5px;
}
</style>
<body>
<div id="container">
<div class="rows"></div>
<div class="rows"></div>
<div class="rows"></div>
<div class="rows"></div>
<div class="rows"></div>
<div class="rows"></div>
<div class="rows"></div>
<div class="rows"></div>
<div class="rows"></div>
<div class="rows"></div>
</div>
</body>
<script>
let rows = document.querySelectorAll('.rows');
let container = document.getElementById('container');
let x = 0;
let y = 0;
for(let i = 0; i < rows.length; i++){
rows[i].addEventListener('mousedown',grabElement);
rows[i].addEventListener('mouseup',stopMoving);
function grabElement(){
rows[i].addEventListener('mousemove',mouseMove);
}
function mouseMove(e){
x = e.clientX;
y = e.clientY;
rows[i].style.transform = `translate(${x-25}px,${y-25}px)`;
}
function stopMoving(){
rows[i].removeEventListener('mousemove',mouseMove);
}
}
</script>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。