クリックの種類を判定するユーティリティ

普通のクリックとダブルクリック、および名前変更のときに使う遅めのダブルクリック?(「かち、かち」っていうやつね)を判定するユーティリティを書いてみました。利用例は以下の通り。ちょい汎用的な形にしておいたので、ダブルクリック以外に三三七拍子とかも判定できます。

// タイマーを作成。
// 引数でクリック対象とする要素とクリック結果がコールバックされる関数を指定する。
new ClickTimer( "clickable", function(result) {
  var type = null;
  var str = result.join(",");
  switch ( str ) {
    case "true,false": type = "クリック"; break;
    case "true,true,false": type = "ダブルクリック"; break;
    case "true,false,true,false": type = "名前変更クリック"; break;
    case "true,true,true,false,true,true,true,false,true,true,true,true,true,true,true,false": type = "三三七拍子"; break;
    default : type = "?";
  }
  document.getElementById( "out" ).innerHTML += type + " ( " + str + " )<br/>";
});

実行結果はこちら。三三七拍子をたたき出すにはそこそこ修行が必要。

ClickTimerの実装は以下です。

ClickTimer = function( id, callback ) {
  this.id = null;
  this.buff = [];
  this.timer = null;
  this.clicked = false;
  this.callback = callback;
  var self = this;
  Event.observe(document.getElementById( id ), 'mouseup', function(ev) { // prototype.jsに依存
    self.onClicked( ev );
  });
}
ClickTimer.prototype = {
  onClicked : function(ev) {
    if ( !this.timer ) {
      this.buff.push( true );
      var self = this;
      this.timer = window.setInterval(function ( ) {
        self.check();
      }, 250);
    } else {
      this.clicked = true;
    }
  }, 
  check : function() {
    this.buff.push( this.clicked );
    this.clicked = false;
    if ( this.isEnd() ) {
      try {
        if ( this.callback ) this.callback.call( null, this.buff.slice( 0, this.buff.length-1 ) );
      } finally {
        window.clearTimeout( this.timer );
        this.timer = null;
        this.buff = [];
      }
    }
  },
  isEnd : function() {
    if (this.buff.length <= 2) return false;
    for( var i=0,n=this.buff.length-1; i<2; i++ ) {
      if ( this.buff[n-i] == true ) return false;
    }
    return true;
  }
}