在 JavaScript 中检查是否在屏幕的上半部分或下半部分按下了鼠标

Question

我想要一个纯 JavaScript 解决方案

这就是我正在做的。我希望你明白：

1. 如果我按下并按住屏幕的上半部分和类似的下半部分，我基本上在这里尝试做的是让我的播放器向上移动。
2. 但我无法找出解决此问题的正确方法。我不知道我搞砸了什么逻辑。
3. 在网上搜索了很多解决方案，但都使用 jQuery，我不想在这个简单的任务中不必要地使用它。

let isdown = false;
    document.addEventListener("mouseup", () => {
        iddown = false;
    });
    document.addEventListener("mousedown", () => {
        isdown = true;
    });
    document.addEventListener("mouseover", (event) => {
        if (isdown) {
            console.log("I am here");
            let middlehalf = window.innerHeight / 2;
            console.log(middlehalf, event.offsetY);
            if (e.offsetY > middlehalf) {
                playerPos += 20;
            } else {
                playerPos -= 20;
            }
        }
    });

总结：

1. 能够处理鼠标按住事件。
2. 与移动设备兼容。
3. 能够区分鼠标事件发生的位置。 （上半部分或下半部分）。
4. 纯 JavaScript 解决方案。

Answer 1

当你使用 offsetY 时，你会得到相对于父级的坐标，这里是文档。如果您向下滚动，那么坐标也会向下移动。您可以使用clientY，它会为您提供视口中相对于屏幕本身的坐标。

document.addEventListener("mouseover", (event) => {
    if (isdown) {
        let middlehalf = window.innerHeight / 2;
        if (e.clientY > middlehalf) {
            playerPos += 20;
        } else {
            playerPos -= 20;
        }
    }
});