ブラウザで作る各種ツールを使っていて、たまにボタンをダブルクリックするユーザがいる。結果、各種判定が二重に送信されたりする。そういうものなのだろうか？と悩むが、ダブルクリックされても大丈夫なようにした方がよいだろう、ということで以下のようなものを作ってみた。

<button class="clickable io-github-shunshun94-util-UnDoubleClickable">ダブルクリック不能1</button>
<button class="clickable io-github-shunshun94-util-UnDoubleClickable">ダブルクリック不能2</button>
<div style="background-color: black; color: white;" id="console"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://shunshun94.github.io/shared/jquery/io/github/shunshun94/util/unDoubleClickable.js" type="text/javascript"></script>
<script type="text/javascript">let i = 0;
$('.clickable').on('click', (e)=>{
	$('#console').html($('#console').html() + '<br/>クリックされました。クリックされたボタンは 0.8 秒の間無効です');
});</script>

以下3つの準備をすれば利用できる。

1. クリックさせたい要素にイベントをバインドしておく
2. クリックさせたい要素のクラスに io-github-shunshun94-util-UnDoubleClickable を追加する
3. https://shunshun94.github.io/shared/jquery/io/github/shunshun94/util/unDoubleClickable.js を読み込ませる

これで1でバインドされたイベントが一度発火した後は0.8秒間無効となる。