iPhoneだと2回タップしないとリンクやボタンが反応しない問題を解決

メモ

※この記事は、に最新の情報で更新されました。

iPhoneだと2回タップしないとリンクやボタンが反応しないことがあります。

その場合は<body>の中に ontouchstart=””このタグを追加してあげるだけで解決しました。

<body ontouchstart=””>これです。

WordPressならheader.phpのbodyタグに入れれば全ページに適用されます。

私の場合は以下のようにしました。

<body <?php body_class(); ?> ontouchstart="">

既にbodyの中に<?php body_class(); ?>このタグが含まれていますが、横にontouchstart=””を追加することでiPhoneだと2回タップしないとリンクやボタンが反応しない問題を解決できました。

【上級編】タッチイベントの処理方法

今回は、JavaScriptを使用してタッチイベントを処理する方法について紹介します。具体的には、ontouchstart 属性を使用するのではなく、イベントリスナーを追加する方法を解説します。

元のコード

まず、元のコードを見てみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
  <title>タイトル</title>
</head>
<body class="home blog" ontouchstart="">
  <div>コンテンツ</div>
</body>
</html>

修正後のコード

次に、修正後のコードです。このコードでは、ontouchstart 属性を削除し、JavaScriptでイベントリスナーを追加しています。


<!DOCTYPE html>
<html lang="ja">
<head>
  <title>タイトル</title>
  <script>
    document.addEventListener('DOMContentLoaded', function() { // DOMContentLoadedイベントでDOMツリー構築後に実行
      document.body.addEventListener('touchstart', function(event) {
        // タッチ開始時の処理をここに記述
        console.log('touchstartイベントが発生しました', event);
        // 例：タッチした座標を取得
        console.log("clientX: " + event.touches[0].clientX);
        console.log("clientY: " + event.touches[0].clientY);
      });
    });
  </script>
</head>
<body class="home blog">
  <div>コンテンツ</div>
</body>
</html>

解説

ontouchstart 属性の削除

元のコードでは、<body> タグに ontouchstart="" 属性が直接追加されていました。この方法は非推奨です。代わりに、JavaScriptでイベントリスナーを追加する方法が推奨されます。

イベントリスナー内の処理

イベントリスナー内では、タッチイベントが発生した際にコンソールに情報を出力しています。この処理は、touchstart イベントが発生した座標（clientX と clientY）を取得して表示する例です。

まとめ

このように、JavaScriptでイベントリスナーを追加する方法を使用することで、HTMLの可読性が向上し、コードのメンテナンスが容易になります。これからも、JavaScriptを使って様々なイベントを処理してみましょう。

関連記事

トップページに戻る

お知らせ

登録されているお知らせはございません。

カテゴリー