【JS】画像をドラッグアンドドロップした時にブラウザで開いてしまわないようにする方法

最近、画像をドラッグアンドドロップしてアップロードするフォームを作った時のこと。

対象のエリア内にローカルファイルをドラッグアンドドロップする事でアップロードを成立させたいのだが、誤ってエリア外にドロップしてしまった場合、通常のブラウザの仕様だと別タブでファイルを開いてしまうようになっている。

今回をこれを防ぐ方法を紹介する。

3つのイベントにキャンセル処理を設定する

jQueryを使った書き方だが、3つのイベントに対し以下のようにキャンセル処理を設定するだけだ。

<script>
$(document).on('dragenter', function(e) {
  e.stopPropagation();
  e.preventDefault();
});
$(document).on('dragover', function(e) {
  e.stopPropagation();
  e.preventDefault();
});
$(document).on('drop', function(e) {
  e.stopPropagation();
  e.preventDefault();
});
</script>

もちろんエリア内の要素には別途ドラッグアンドドロップのイベントを書かなければならないが、上記コードを書いておけばその他のエリアでイベントは発火しなくなる。