クリックイベントは反応するのに、ドロップイベントは反応しない

Question

html5 jquery-3.3.1 chorome

前提・実現したいこと

jQuery初心者です。
ドロップイベントを補足したいのですが反応しません。
ドラッグ＆ドロップすると別タブが開いてしまいます。

発生している問題・エラーメッセージ

ブラウザの検証にも、エラーは特に何も出ていません。

該当のソースコード

<div class="hoge" style="width:500px; height:500px; background:red;">
</div>

alert("これは出力される");
$('.hoge').on('drop', function (event) {

    alert("これは出力されない");
  
    
});

$('.hoge').on('click', function (event) {
    alert("click");
});

試したこと

clickイベントは反応しました。
dropだけ反応しません。。。

先輩方アドバイスいただけないでしょうか？
宜しくお願いします。

Answer 1

反応はしてるでしょうね。
ブラウザは「ドラッグ・アンド・ドロップ」だとそのファイルを表示しようとします。
なので、「標準、既定の動作」を止めるだけです。submitボタンのsubmit動作を止めるのと同じ。

---

ということを、
jQuery dropで調べたらすぐ見つけられました。あとはがんばって。

Comments

[pecchan]

ちょうど自己解決したところでした。
有難う御座います。

Answer 2

ここにあるように、デフォルトの動作を明示的に止め、その要素がdropイベントを受け付けることをブラウザに示せばいけました。

https://www.codegrid.net/articles/2014-html5-api-1/

$('#box').on('dragstart', onDragStart);
$('#dropzone').on('dragover', onDragOver);
$('#dropzone').on('drop', onDrop);

function onDragStart(e) {
  e.originalEvent.dataTransfer.setData('text', this.id);
}

function onDragOver(e) {
  e.preventDefault();
  this.textContent = 'onDragOver';
}

function onDrop(e) {
  e.preventDefault();
  this.textContent = 'onDrop';
}