読者です 読者をやめる 読者になる 読者になる

jQueryで一回だけイベント

JavaScript

jQueryで一回だけクリックできる(または二回目以降別のハンドラに切り替わる)ボタンを作りたい場合、もっとも簡単な方法はこんな感じじゃないかなという話です。

まずは、ありがちな方法。

var oneshot = function(){
  alert('oneshot');
  $('button').unbind('click', oneshot);
  return false;
};
$('button').click(oneshot);

関数をいったん定義しないといけないので、ひと手間食いますね。jQueryのサンプルのように、関数を直接引数のところに書けたらな。じゃあ、こう書けばどうでしょう。

$('button').click(function(){
  alert('oneshot');
  $('button').unbind('click', arguments.callee);
  return false;
});

arguments.calleeを使いました。この変数はシステム予約変数で、呼び出された関数インスタンスを指しています。まあ、クラスでいうthisのようなものの関数版ですね。これで、固有な名前を設けずに、「自分」をunbindすることができました。

これからは、ハンドラ抜くレベルでイベントを無効化する必要があったり、動作そのものが変化するようなものでも、関数リテラルをががーっと勢いで作ることができそうです。


追記: yamada-22さんに添削いただきました。もっとも短く書くというのは、つまりこういうことですよね。上のは、短いというより、かゆいところに手を届かせる感じですね。

$('button').one('click', function(){
  alert('oneshot');
  return false;
});