JavaScript クリックイベントでtargetのclassListを操作した場合にスマホ側でCSSが反映されない時の対処法

少し詰まったのでメモを残しておきます。問題の原因は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」が残り続けるので上のボタンのような動作になりました。

 

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

 

この記事へのコメント

  1. 名前:名無しさん 2020/04/22(水) 14:42:29返信する

    このtipsは良いですね!
    hoverがタッチに影響するのは中々気づかないので、とても参考になります。

  2. 名前:hyper_T 2020/04/23(木) 07:32:52返信する

    >>1
    MDNのドキュメントでhoverの擬似クラスがモバイルで不具合を起こす可能性があると書かれているのを見た記憶が微かに・・・。
    しかし検索してもたどり着けなかったのでこの記事が誰かの役に立つはず・・・。

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。