【JavaScript】＜a＞タグの連打を防止する方法
画像と＜a＞タグでボタンを作ったのですが連打させたくありません。
１回だけ受け付けて、２回目以降は無視してほしいのです。
色々調べて disabled＝true にすると良いのかと思いましたが、
＜a＞タグにはdisabledプロパティがありません。
そこでもう少し調べていくと解決策が見つかりました。
pointer-events プロパティを使えばよいらしいです！
JavaScriptで使う場合は pointerEvents を指定します。
実際のサンプルコード
HTML
<a href="https://~" onClick="doDisabled(this)">ああ</a>
this を指定するとその要素のオブジェクトが渡されるよ。
JavaScript
<script type="text/javascript">
function doDisabled(btn) {
btn.style.pointerEvents = "none";
}
</script>
これで出来上がり！
しかし欠点もあります。
問題点
キーイベントは無効化されない
タブなどを押してリンクにカーソルを合わせてリターンキーを押すと反応してしまいます。
なので、tabindex=-1 を付けておくと安全です。
JavaScript
<script type="text/javascript">
function doDisabled(btn) {
btn.style.pointerEvents = "none";
btn.tabindex = -1;
}
</script>
IE10以下のバージョンではサポートしていない
IEは2022年6月16日にサポートが終了しているので新しいブラウザを使ってもらいましょう。
キャッシュでブラウザバックするとボタンが押せないままになってる
ブラウザバックのボタンを押して画面がリロードされるのであれば問題ないのですが、例えばガワネイティブのようなアプリでページ遷移前の状態をキャッシュして、キャッシュからページを表示するタイプだとボタンを無効化した状態のままなので、リンクを押せなくなってしまいます。
ユーザーが手動でリロードしてくれればいいのですが、手間を掛けさせるわけにもいきません。
一定時間経過したら有効になるような処理を入れると良いのかもしれませんが、私の場合は解決できずに断念しました。。。；；
結局、サーバ側で連打検知を入れて対応したのですがあまりスマートでない形となりました。
良い解決方法があれば教えてください。；；
以上です。
投稿
0 件のコメント:
コメントを投稿