5

dragenterいくつかの子を含むオブジェクトにイベントをバインドしました。

$(document).on('dragenter', '#container', function(e) {
  console.log('dragenter');
});

ファイルをドラッグして移動すると、このイベントが繰り返し発生します。私が期待していたのは、要素dragenterに入るときにのみ発火すること#containerであり、すべての子も発火するわけではありません。

それは適切な行動ですか？どうすれば防ぐことができますか？

4

3 に答える 3

12

イベントをトリガーした要素がコンテナーかどうかをテストできます。

var container = $('#container').get(0);

$(document).on('dragenter', '#container', function(event) {
  if(event.target === container) {
      console.log('dragenter');
  }
});

または、イベント委任を使用する必要がない場合:

$('#container').on('dragenter', function(event) {
    if(event.target === this) {
        console.log('dragenter');
    }  
});
于 2012-04-24T12:09:04.917 に答える
0

stopPropagation を追加してみてください

$(document).on('dragenter', '#container', function(e) {
  e.stopPropagation();
  console.log('dragenter');
});
于 2012-04-24T12:07:34.087 に答える
0

この質問に対する私の答えは、イベント バブリングの代わりに イベント キャプチャを使用することです。

一言で言えば、外側の要素からソース要素まで、またはe.stopPropagation()呼び出されるまで「細流」をキャプチャするイベントです。

イベントのバブリングは、ソース要素から親を通ってドキュメントに到達するまで、または で停止するまで、イベントをバブルアップしe.stopPropagation()ます。

したがって、ドラッグ エンターに適用するには、実際にはイベントを生成しているのが内側の div であっても、外側の div でイベントを処理する必要があります。

イベント キャプチャを使用して、内部 div の前に外部 Div で ondragenter を起動します。外側の div イベント ハンドラーで、e.stopPropagation を呼び出します。したがって、内側の div イベント ハンドラーが実際に実行されることはありません。

これは、jquery を使用してイベントをキャプチャする方法です。

$("#outerDiv").get(0).addEventListener("ondragenter", function(e){e.stopPropagation()}, true);

最後のパラメーターに注意してください。

于 2016-12-22T23:46:08.387 に答える