iphoneで2回タッチしないとリンクが飛ばない時の対処方法

Webサイトを制作してスマホで動作を確認すると、リンクを2回タップしないとリンク先に飛ばない時が結構あります。

あと、バナーなどにhoverをつけているのに、スマホの場合はそもそもタッチしてしまうのでhoverが効かないように見えるという現象もあります。

この問題はiOS特有の不具合のようで、昔からjavascriptなどで対策されているようです。

じつは、CSSだけで簡単になおります。

この記事ではスマホで2回タップしないとリンク先に飛ばない問題と、スマホでもhoverのアクションが起こるように属性を追加する修正する方法についてまとめておきます。

この記事で分かること

スマホだとhoverが効かない問題
1. スマホだとhoverが効かない問題の対策
スマホ（iOS）だと2回タップしないとリンク先に飛ばない問題
1. スマホだと2回タップしないとリンク先に飛ばない問題の対策
ontouchstart属性の追加方法
buttonタグのaタグの組み合わせが問題を起こすこともある
まとめ

スマホだとhoverが効かない問題

よく考えてみると当たり前なのですが、スマホの場合はhoverが無視されます。

スマホの場合はhoverという動き自体がタッチする操作と区別できないのでhoverは無視されるわけです。

これは避けようが無いのでは？と思っていたのですが、属性を追加するとことで、タッチした時にリンクに飛ぶ動作とhover動作を同時にさせることができることがわかりました。

スマホだとhoverが効かない問題の対策

親要素にontouchstart=””という属性を追加すればよいです。こうすることで、リンク先に飛ぶ前にhoverのアクションが動くようになります。

ontouchstart=””はbodyタグにつけておけば子要素すべてが対象になります。

<body ontouchstart="">
  <div id="wrapper">
    <div class="box"></div>
  </div>
</body>

スマホ（iOS）だと2回タップしないとリンク先に飛ばない問題

この原因は、hoverなどが当たっている場合のiOSのバグが影響しているようです。

こちらも先ほどと同じ対策で解決します。

スマホだと2回タップしないとリンク先に飛ばない問題の対策

ontouchstart=””を親要素につければ大丈夫です。bodyタグにつけておけば子要素すべてが対象になります。

<body ontouchstart="">
  <div id="wrapper">
    <div class="box"></div>
  </div>
</body>

ontouchstart属性の追加方法

ontouchstart属性を追加すればいいのはわかっても、実際追加するのは結構面倒だったりします。

WordPressの場合は、header.phpにbodyタグの開始があると思いますので、そこに追加すればいいのですが、子テーマの作成も必要ですし、header.phpの他の変更が親テーマにあったときに一緒に修正しなければならない問題もあります。

body ontouchstart=””とかく代わりに、javascriptで以下のいずれかを記載しても同じ効果が得られるようです。

window.ontouchstart = function() {};
window.addEventListener('touchstart', function() {}, true);
window.addEventListener('touchstart', function() {}, false);

document.ontouchstart = function() {};
document.addEventListener('touchstart', function() {}, true);
document.addEventListener('touchstart', function() {}, false);

document.body.ontouchstart = function() {};
document.body.addEventListener('touchstart', function() {}, true);
document.body.addEventListener('touchstart', function() {}, false);

参考：https://neos21.net/blog/2018/08/19-01.html