javascript ダブルタップイベントを取得する

作成日 2020.09.23
更新日 2022.06.27
javascript
javascript

javascriptで、touchstartを使用して、ダブルタップイベントを取得するサンプルコードを記述してます。

1. 環境
2. ダブルタップイベントを取得
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 102.0.5005.115

Javascript サンプル集はこちら

ダブルタップイベントを取得

touchstartを使用して、まずシングルタップを取得して、500ミリ秒以内に2回目のタップがされればダブルタップと判定します。

<div id="sample" 
style="
height: 200px;
width: 200px;
border: 4px solid;
border-color: green;
"
>mebee</div>

<script>

let count = 0;

// 要素を取得
let elm = document.getElementById('sample');

// イベントを登録
elm.addEventListener("touchstart", function (e) {
  if (!count) {
    // タップの回数を+1
    ++count;
    // 500ミリ秒以内に2回目のタップがされればダブルタップと判定
    setTimeout(function () {
      count = 0;
    }, 500);

  // ダブルタップ
  } else {
    // 拡大をさせない
    e.preventDefault();
    // 処理を記述
    // 回数をリセット
    count = 0
    console.log( "ダブルタップされました" );
  }
});

</script>

実行結果

「ontouchstart」を使用するしても、同様の結果となります。

addEventListenerとonの違い

<script>

let count = 0;

// 要素を取得
let elm = document.getElementById('sample');

// イベントを登録
elm.ontouchstart = function (e) {

  if (!count) {
    // タップの回数を+1
    ++count;
    // 500ミリ秒以内に2回目のタップがされればダブルタップと判定
    setTimeout(function () {
      count = 0;
    }, 500);

  // ダブルタップ
  } else {
    // 拡大をさせない
    e.preventDefault();
    // 処理を記述
    // 回数をリセット
    count = 0
    console.log( "ダブルタップされました" );
  }

};

</script>

サンプルコード

以下は、
「タップエリア」をダブルタップすると、要素の背景色を変更する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.1.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:150px">

    <h2><span id="foo" class="badge badge-primary">タップエリア</span></h2>

  </div>

  <script>

    let count = 0;

    // 要素を取得
    let elm = document.getElementById('foo');

    // イベントを登録
    elm.addEventListener("touchstart", function (e) {
      if (!count) {
        // タップの回数を+1
        ++count;
        // 500ミリ秒以内に2回目のタップがされればダブルタップと判定
        setTimeout(function () {
          count = 0;
        }, 500);

        // ダブルタップ
      } else {
        // 拡大をさせない
        e.preventDefault();
        // ダブルタップイベントの処理内容
        // 要素の背景色を変更する
        if (elm.className === "badge badge-primary") {
          elm.className = "badge badge-warning";
        } else {
          elm.className = "badge badge-primary";
        };
        // 回数をリセット
        count = 0;
      }
    });

  </script>
</body>

</html>

ダブルタップイベントが取得されていることが確認できます。

また、javascript部はwindowオブジェクトやdocument.getElementByIdを省略して三項演算子で、記述することも可能です。関数もアロー関数を使用できます。

アロー関数の使い方

三項演算子を使ってif文を1行で書く

let count = 0;

foo.addEventListener("touchstart", (e) => {
  (!count) ? (
    // タップの回数を+1
    ++count,
    // 500ミリ秒以内に2回目のタップがされればダブルタップと判定
    setTimeout(() => { count = 0; }, 500)
  )
    : (
      e.preventDefault(),
      (foo.className === "badge badge-primary") ? foo.className = "badge badge-warning" : foo.className = "badge badge-primary",
      count = 0
    )
}
);