ボタンを無効化する
彡(゚)(゚)「お、100万円のティッシュか・・・」
彡(^)(^)「ええやん!買ったろ!それにしても高いものやからクリックする指も震えるで」カチカチッ
(´・ω・`)「2個買ったな。200万とっとと払えや」
彡()()「ファッ!?」
ボタンまたはリンクを抑制
しょうもない茶番のような事は実際によくある事です。
なので、大事な送信系ボタンorリンクに関しては1クリックでそのボタンを無効化させるようにしましょう。
$(function(){ $('.btnSubmit').on('click',function(e) { if($(this).attr('type') != 'submit' && $(this).attr('type') != 'button') { // リンク系 // disabledクラスを付与し、存在していればreturn false;して // イベント伝播キャンセル a遷移を止めます。 // ただし、インラインでonClickが記述されている場合はこの処理は動作しない // onClick処理内にクラス付与と、伝播キャンセルの処理を直接書く必要がある。 if($(this).hasClass('disabled') == true){ return false; } $(this).addClass('disabled'); } else { // submitボタン系 // クリック要素から見て直近のformをsubmitさせている。 // 別処理でsubmitさせているとかの場合は、そこにdisabled処理を書き込んで // .btnSubmitは付与しないのがベスト $(this).attr('disabled','disabled'); $(this).closest('form').submit(); } }); });
上記記述していますが
こちらが有効なのは、タダのaタグおよび、formタグ内にあるただのsubmitボタンに対しての処理です。
別JS処理でsubmitさせている。インラインでonClickが記述されている場合は
上記を使用するべきではないと思います。
この処理に有効なもののデモ
※※補足※※
ただの画面遷移なので、擬似遷移として、console.logで文字を表示させています。
連打すれば分かるように、途中で止められていますので、1クリックのみ有効という事になります。
この処理が有効な構造例
<!-- リンク --> <a href="/" class="btnSubmit">disabled_submitLink</a> <!-- submitボタン --> <form action="/" method="POST" class="mb20" id="testForm" name="testForm"> <input type="submit" name="sss" value=" disabled " class="btnSubmit"> </form>
インラインで記述されている場合
例えば下記のような構造のもの
<form action="/" method="POST" class="mb20" id="testForm" name="testForm"> </form> <!-- リンク --> <a href="/" onClick="document.forms['testForm'].submit();">submitLink</a>
こうなってしまうと、インラインのonClickとJS処理は別物として動きますので、別JSから干渉はできません。
なので、こうなってしまった場合は、インラインのonClick内の処理を修正する必要があります。
<form action="/" method="POST" class="mb20" id="testForm" name="testForm">
</form>
<!-- リンク -->
<a href="/" onClick="if($(this).hasClass('disabled') == true){return false;}; $(this).addClass('disabled'); document.forms['testForm'].submit(); return false;">submitLink</a>
<!-- 上記赤字部分をコピーして使用する -->
この処理に有効なもののデモ
※※補足※※
console.logでテキストを表示させています。
画面遷移は、setTimeout 1秒の処理をかけていますので、1秒後にsubmitが走ります。
その間連打してもconsole.logは動作しませんので、1クリックのみ有効との証明になります。