スマホ、タブレット等のタッチデバイスで疑似クラスhover を使うと1クリックで実行できない

プログラミング
スポンサーリンク

スマホ、タブレット等のタッチデバイスでボタンに疑似クラスhover を使うと1クリックで実行できないです。

スポンサーリンク

hover使うとパソコンでは1クリック、スマホでは2クリック必要になる

疑似クラス hover を使ったボタンクリックのサンプルです。

HTML

 

JavaScript

 

CSS

 

実行例

↓jsfiddleの実行例

https://jsfiddle.net/urashita/306jhLa1/73/

タブレットやスマホでマウスオーバーがないのでontouchstart=""を使う

タブレットやスマホでボタンにマウスオーバーを指定していると、1回タップしただけでは実行せず、2回タップして初めて実行されることがあります。

これは、1回目のタップでボタンにフォーカスが当たるようです。

 

この問題を解決するには、タッチさせる要素に ontouchstart=""と指定する。

HTML

 

実行例

↓jsfiddleの実行例

https://jsfiddle.net/urashita/306jhLa1/74/

 

コメント