Skip to content

ダブルクリック・タップできるようにする

Akashic Engine に直接ダブルクリックを検出する機能はありません。 onPointDownonPointUp などを組み合わせて実現する必要があります。 いわゆる「クリック」はマウスを離したタイミングで判定されますが、ここでは単純にマウスを押したタイミングで処理を行います。

実現コード

javascript
var rect = new g.FilledRect({
  ...,      // その他のプロパティ
  touchable: true // 触れられるオブジェクトにする
});

var isRightAfterClick = false; // クリックの直後か否か。
var doubleClickTimer = null;

rect.onPointDown.add(function () {
  if (isRightAfterClick) {
    isRightAfterClick = false;

    // ダブルクリックされた
    console.log("double clicked!");
  } else {
    // ダブルクリックではない
    console.log("clicked!");
  }
});
rect.onPointUp.add(function () {
  isRightAfterClick = true;
  doubleClickTimer = scene.setTimeout(function () {
    isRightAfterClick = false;
    doubleClickTimer = null;
  }, 300);
});

次のコンテンツは、矩形をダブルクリック・ダブルタップした場合に矩形の色が変わります。

解説

この例では、 onPointUp トリガーで isRightAfterClicktrue に設定し、タイマーにて一定時間後に false に戻しています。 onPointDown トリガーでマウス押下・タップを検出した時、isRightAfterClicktrue であれば、前回のクリックから一定時間以内なのでダブルクリックとして扱います。

タイマーの時間を変更することで、ダブルクリックとして認識する時間を調整できます。

関連情報