スマホでactive擬似要素タッチだけで反応してしまう

Question

スマホでactive擬似要素がタッチだけで反応してしまいます。

クリックしてページ遷移の時のみactive擬似要素を有効にすることはできないのでしょうか?

--追記--
タッチしても、長押した後に指を話した場合などにはページの遷移はしないと思います。

しかし、長押し中もbackground-color: #ccc;となってしまいます。

ul li:active {
  background-color: #ccc;
}

Comments

[hassy_ta]

タッチ＝クリックしてページ遷移、ではないのですか？意図している挙動と問題となっている挙動、コードをもう少し具体的に書いていただきたいです。

[nazo_o]

わかりにくく、申し訳ありません。追記致しました！

[yoshinavi]

質問文の意味が理解出来てないかもですが、スマホでのタッチ操作には反応させないで、PC使用時にマウスでのクリックのみに、反応させたいとの事で良いのでしょうか？

[nazo_o]

スマホでもPCのマウスでも、リンクを踏んで画面遷移する場合のみに反応させたいということです。スマホでは、タッチしても遷移しないように触れることもできると思います。その場合でもactiveですと、反応してしまうようです。わかりにくくて申し訳ありません。よろしくお願いいたします！

Answer 1

しかし、長押し中もbackground-color: #ccc;となってしまいます。

押している間ということは :active なのだから当然の挙動だと思います。

タッチイベントが使えないデバイスを JavaScriptで判別して、そのデバイスでは :active を使い、タッチデバイスは touchstart イベントを JavaScriptで取得して短期間 :active と同じ効果を持つクラスを付けて外す処理をすれば「タッチした瞬間に効果が出た上で長押し中は途中で効果が切れる」ということは可能だと思います。（もしくはクリックイベントで効果をつけることはできますが、ページ移動を伴うなら大きな意味はないような気がします）

タッチと長押しは厳密には区別しにくいものなので、ある程度のところまでしか調整できないとは思います。

【touch, click, pointerの実装 - タッチイベントとマウスイベント | CodeGrid】
https://app.codegrid.net/entry/touch-mouse

Answer 2

個人的な見解と情報を知らないだけかもですが、質問者さんの望む動きは出来ないと思います。
スマホの場合、CSSの「:hover」が対応出来ないですし、「長押し」はPCマウスクリックが対応出来ませんので、現状仕様の動作だと思います。