JavaScript中条件不满足时函数仍执行if分支的问题

我给输入框绑定了如下函数，预期逻辑是：当光标不是自定义png时切换为该自定义光标；若已是自定义光标，则恢复默认光标。但执行一次后，光标处于自定义状态时，函数仍进入if分支，无法正确切换。

原代码：

function keyIcon1Action()
{
    if (document.body.style.cursor != 'url(keyCursor1.png)')
    {
        document.body.style.cursor = 'url("keyCursor1.png"), auto';
        menuText.innerHTML = "Vieille clé";
        menuText.style.visibility = "visible";
        keyIcon1.style.opacity = "0.34";
    }
    else
    {
        document.body.style.cursor = "default";
        menuText.style.visibility = "hidden";
        menuText.innerHTML = "";
        keyIcon1.style.opacity = "1";
    }
}

问题原因 #

你设置的cursor值是url("keyCursor1.png"), auto，但判断条件只对比了url(keyCursor1.png)，两者完全不相等，所以每次都会进入if分支，无法触发else逻辑。另外，浏览器读取style.cursor时会返回完整的属性值，不会省略后面的auto fallback。

修正方案 #

方案1：匹配完整的cursor属性值

直接用你设置的完整cursor字符串作为判断依据：

function keyIcon1Action()
{
    const customCursor = 'url("keyCursor1.png"), auto';
    if (document.body.style.cursor !== customCursor)
    {
        document.body.style.cursor = customCursor;
        menuText.innerHTML = "Vieille clé";
        menuText.style.visibility = "visible";
        keyIcon1.style.opacity = "0.34";
    }
    else
    {
        document.body.style.cursor = "default";
        menuText.style.visibility = "hidden";
        menuText.innerHTML = "";
        keyIcon1.style.opacity = "1";
    }
}

方案2：用状态变量追踪光标状态（更可靠）

避免直接读取style属性的不确定性，用一个变量记录当前是否是自定义光标：

let isCustomCursorActive = false;

function keyIcon1Action()
{
    if (!isCustomCursorActive)
    {
        document.body.style.cursor = 'url("keyCursor1.png"), auto';
        menuText.innerHTML = "Vieille clé";
        menuText.style.visibility = "visible";
        keyIcon1.style.opacity = "0.34";
        isCustomCursorActive = true;
    }
    else
    {
        document.body.style.cursor = "default";
        menuText.style.visibility = "hidden";
        menuText.innerHTML = "";
        keyIcon1.style.opacity = "1";
        isCustomCursorActive = false;
    }
}

方案2的兼容性更好，因为不同浏览器对cursor属性的解析格式可能存在细微差异，用状态变量直接追踪状态可以彻底避免这类问题。

内容的提问来源于stack exchange，提问作者rootbeer2017