1分でわかるjQueryやJavaScriptでクリックを1回だけ有効にする方法

jQueryでクリックを1回だけ有効

$('button').one('click', function() {
  alert('1回だけalert表示');
});

クリックを1回だけ有効にするサンプル1

JavaScriptでクリックを1回だけ有効

var b = document.querySelector('button');
var a = function() {
  alert('1回だけalert表示');
  b.removeEventListener('click', a);
};
b.addEventListener('click', a);

クリックを1回だけ有効にするサンプル2

ただし、将来的には第3引数に{once: true}を指定する。

var b = document.querySelector('button');
var a = function() {
  alert('1回だけalert表示');
};
b.addEventListener('click', a, {once: true});

クリックを1回だけ有効にするサンプル3

{once: true}はIE11やAndroid 4.4.4以下では使用不可のため2017年現在ではWebサイトでの使用は実質不可。

disabled = trueにする

inputまたはbuttonタグであればdisabled = trueで1回だけ有効にすることができる。このやり方だとクリック後のボタンの見た目が変わる。

var b = document.querySelector('button');
var a = function() {
  alert('1回だけalert表示');
  b.disabled = true;
};
b.addEventListener('click', a);

クリックを1回だけ有効にするサンプル4