少し詰まったのでメモを残しておきます。問題の原因はCSSの設定で擬似クラスの「:hover」を消すことで解決しました。

addEventListener(), click, classList, add, remove, toggle, CSS, スマホ, 反映されない

予想外の動作

クリックすると色が変わる2つのボタンがあります。

どちらも押すと色が変わることを想定していますが、スマホ下において片方は元の色に戻すときに色変更が反映されません。（別の要素をタップすると遅れて反映される。）

やっていること・原因

test.js

function ChangeColor(e)
{
    // classの切り替え
    e.target.classList.toggle("color");
}

window.onload = function ()
{
    // 正しく動作するボタンとスマホ側だと反映されないボタン
    document.querySelectorAll(".btnWrap button").forEach(e =>
    {
        e.addEventListener("click", ChangeColor, false);
    })
}

style.css

<style>
.btnWrap button{
    background: white;
    border: 1px solid #cdcdcd;
    padding: 16px;
    margin-right: 16px;
}

.color {
    background: blue;
    color: white;
}
.hover:hover {
    background: blue;
    color: white;
}
</style>

正しく動作しないボタンにはCSSの擬似クラス「:hover」が付いていて、さらに変更後の見た目と同じスタイルが設定されていました。

スマホのタッチ操作では他の要素をタッチするまで擬似クラスの「:hover」が残り続けるので上のボタンのような動作になりました。

マウスオーバーとクリックしたときのスタイルが同じだったこともあって気づきにくかったです。同じように詰まった方の役に立てば幸いです。