仕事で、面白い実装をしているのを発見してしまいちょっと話題になりました。

データをエクセルまたはCSVでダウンロードするためのボタンがあります。よくある対処なのですが、2重クリックを防ぐために、onclickイベント内で disabled=true にしてボタンを非活性状態にしてから、formをサブミットしています。

で、問題なのが、このボタンのdisabledをfalseに戻すタイミングです。現状の作りでは、ダウンロードボタンより上にある、とあるDIV要素内にmouseOverしたらボタンのdisabledを解除するような作りになっていました。

企業向けでIE6という縛りがあるので、逆にそれを利用すれば、次のような対応でいけるかと思います。

    1 <input onclick="download()" type="submit" value="download" />
    2 <script>
    3     function download(){
    4         var btn = this;
    5         btn.disabled = true;
    6         window.onfocus = function(){
    7             btn.disabled = false;
    8             window.onfocus = null;
    9         };
   10     }
   11 </script>
   12 

 

ダウンロードボタンがクリックされたタイミングでボタンを非活性にするのは同じなのですが、同じタイミングで windowのfocusイベントを割り当てて、windowにfocusが戻った時点で、再度ボタンを非活性を解除して、さらにwindowの focusイベントも解除しています。

少なくともIE6ではファイルダウンロードのダイアログがモーダルで表示されるため、少なくともユー ザーが 「開く、保存、キャンセル」のいずれかの操作をしなければ、元のウィンドウにフォーカスが戻ることはありません。 で、普通に考えればユーザーが上記のいずれかの操作を行ったあとであれば、ボタンが再度押せるようになっていても問題はないでしょう。

Firefoxだとモーダルではないのですが、まあ、問題はないような気がします。

Chromeはダウンロードダイアログがないので使えないですね。。。