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。应该将其声明为沿 run，而不是在内部。因为它在其中，所以每次运行posLeft时，您都会得到一个新的run等于500。

或者，您可以从元素中读取值（这可能是一个更好的主意）。

还请注意，您已经颠倒了两个条件。你有

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">

我怎样才能使按钮远离光标？

1 个答案: