応答を送信する前に処理するのに数秒かかるリンクがいくつかあるので、インジケーター アイコンを実装したいと思います。ここに私の出発点があります:
<a href="/foo"><img src="icon.png" /></a>
これはレガシ アプリであり、コードは既にごちゃごちゃになっているため、気にせずインライン イベント ハンドラを使用します。
<a href="/foo"><img src="icon.png" onclick="indicate(this)" /></a>
また、関連付けられている JS フレームワークはありません。他のメカニズムを使用してイベント ハンドラーを適用することもできますが、解決しようとしている問題は変わりません。
バックエンド処理は多くのリソースを消費するため、ユーザーが複数回クリックしないようにしたい。最初のクリックで href 属性を削除しようとしました。タイムアウトを使用すると、リクエストの送信後に href が適切に削除されるようですが、Firefox と IE9 の両方でリンクを再度クリックできます。
以下は、indicate() 関数です。
function indicate(e) {
if (indicator.ref.nodeName) indicateStop();
// save state
indicator.ref = e;
indicator.orig.href = indicator.ref.parentNode.href;
indicator.orig.src = indicator.ref.src;
// replace icon
indicator.ref.src = indicator.src;
// remove href
setTimeout(function(){ indicator.ref.parentNode.removeAttribute("href"); }, 20);
}
問題は、リンク (アンカー) をクリックして「クリッカビリティ」を削除するにはどうすればよいかということです。