拖动鼠标时，我正在尝试检测鼠标的方向。当鼠标按钮按下并且用户拖动鼠标时，我希望文本根据鼠标拖动方向向左或向右更改。
这是我的密码。
var divOverlay = document.getElementById ("div");
var dragged = false
window.addEventListener('mousedown', function () { dragged = false })
document.addEventListener('mousemove', function () { dragged = true })
window.addEventListener('mouseup', function(e) {
if (dragged == true && e.pageX <= 0) {
direction = "left"
} else if (dragged == true && e.pageX >= 0) {
direction = "right"
}
divOverlay.innerHTML = direction;
oldx = e.pageX;
})#div {
width: 100px;
height: 100px;
background: red;
}<div id="div"></div>我不认为我离得太远，但我不能锻炼我做错了什么，所以我需要一些帮助。
开始吧。它只需要一个小调整。
var divOverlay = document.getElementById ("div");
var dragged = false
var oldX = 0;
window.addEventListener('mousedown', function (e) { oldX = e.pageX; dragged = false })
document.addEventListener('mousemove', function () { dragged = true })
window.addEventListener('mouseup', function(e) {
if (dragged == true && e.pageX < oldX) {
direction = "left"
} else if (dragged == true && e.pageX > oldX) {
direction = "right"
}
divOverlay.innerHTML = direction;
})#div {
width: 100px;
height: 100px;
background: red;
}<div id="div"></div>您应该将oldX添加到位置检查中。你还需要初始化它。
var divOverlay = document.getElementById("div");
var dragged = false
var oldX = 0;
window.addEventListener('mousedown', function (e) {
dragged = false;
// set start position of drag
oldX = e.pageX;
});
document.addEventListener('mousemove', function () {
dragged = true
});
window.addEventListener('mouseup', function (e) {
// compare drag end position with start position
if (dragged == true && e.pageX <= oldX) {
direction = "left"
} else if (dragged == true && e.pageX > oldX) {
direction = "right"
}
divOverlay.innerHTML = direction;
});#div {
width: 100px;
height: 100px;
background: red;
}<div id="div"></div>有一个单独的函数来处理鼠标在X轴上的相对方向可能更适合您想要做的事情。释放鼠标后，请删除eventListener，而不是尝试更新变量。
参见以下示例：
const body = document.body;
const container = document.getElementById('container');
const directionTag = document.getElementById("direction");
const moveFunc = function (e) {
let direction;
if (e.movementX < 0) {
container.style.backgroundColor = "red";
direction = "left";
} else if (e.movementX > 0) {
container.style.backgroundColor = "blue";
direction = "right";
}
if (typeof direction !== "undefined") {
directionTag.innerHTML = direction;
}
};
body.onmousedown = function () {
body.addEventListener("mousemove", moveFunc);
};
body.onmouseup = function () {
body.removeEventListener("mousemove", moveFunc);
};#container {
height: 150px;
margin: 20px;
padding: 20px;
width: 300px;
border: 1px solid #888;
}<body>
<div id="container">This will change when you hold down</div>
<p id="direction">Unset</p>
</body>