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

Question

我想要一个纯粹的JavaScript解决方案

这就是我正在做的。我希望你有一个清晰的想法：

如果我按下并按住屏幕和类似的下半部分。
但是我想不出解决这个问题的正确方法。我不知道我搞砸了什么逻辑。
已经在网上搜索了很多解决方案，但都在使用 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;
            }
        }
    });

总结：

能够处理鼠标按住事件。
与移动设备兼容。
能够区分鼠标事件发生的位置。（要么上半部，要么下半部）。
纯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;
        }
    }
});

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

Check if a mouse is pressed at the upper half or lower half of the screen in JavaScript

html

javascript

css

mouseclick-event

dom-events