javascript - 如何从光标制作一个 "runs away"的按钮？

Question

我正在尝试编写代码，当用户将鼠标悬停在按钮上时，它会继续移动按钮(因此它永远不会被实际点击)

我正在使用“style.left”来确定新的按钮位置

这是我编写的函数，它不能像我希望的那样工作:

document.getElementById("button5").addEventListener("mouseenter", run);
    function run() {
        var posLeft = 500 ;
        if (posLeft > 450) {
             document.getElementById("button5").style.left = posLeft + "px"; 
                posLeft +=150;
    }
        else if (posLeft >= 800) { 
                    posLeft = 200;
                    document.getElementById("button5").style.left = posLeft +"px"};
    };

我希望按钮继续移动:只要 posLeft 小于 800px，我希望它移动到屏幕右侧，一旦它超过该阈值，我希望 ti 重置为 200px。相反，它只向右跳一次，什么都不做。

Answer 1

您在错误的范围内声明了 posLeft。它应该在 alongside run 中声明，而不是在其中声明。因为它在其中，每次 run 运行时，您都会得到一个等于 500 的新 posLeft。

或者，您可以从元素中读取值(这可能是更好的主意)。

另请注意，您的两个条件颠倒了。你有

if (posLeft > 450) {
    // ...
} else if (posLeft >= 800) {
    // ...
}

第二个条件永远不会为真，因为第一个条件总是为真并且已经过预先测试。只需反转它们即可。

所以，一些类似的东西:

document.getElementById("button5").addEventListener("mouseenter", run);
function run() {
    var btn = document.getElementById("button5");
    if (!btn.style.left) {
        // Default to 500 to start
        btn.style.left = "500px";
    } else {
        var posLeft = parseInt(btn.style.left); // parseInt ignores the px on the end
        if (posLeft >= 800) {
            btn.style.left = "200px";
        } else if (posLeft > 450) {
            posLeft += 150;
            btn.style.left = (posLeft + 150) + "px";
        }
    }
}

<input type="button" style="position: absolute" id="button5" value="Click Me">