25

ドラッグ/ドロップ イベントをバインドしたいページがあります。documentブラウザーのページ全体をドロップ ターゲットにしたいので、イベントをオブジェクトにバインドしました。ただし、私のアプリケーションのコンテンツは AJAX を介してメイン コンテンツ エリアに読み込まれます。アップロード ページが現在表示されている場合にのみ、これらのイベント ハンドラーをアクティブにしたいと考えています。

現在、アップロード ページの取得時にイベント ハンドラーをバインドしています。ただし、アップロード ページがアクティブになるたびに、新しいイベント ハンドラーがバインドされます。これにより、ユーザーがアップロード ページに移動し、離れてから戻ってきたときに、ハンドラーが複数回起動されます。まだバインドされていない場合にのみハンドラーをバインドできれば、これを解決できると考えていました。これは可能ですか、それともより良い代替案を見落としていますか?

役立つ場合は、関連するコード:

$(document).bind('dragenter', function(e) {
    e.stopPropagation();
    e.preventDefault();
}).bind('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
}).bind('drop', function(e) {
    e.stopPropagation();
    e.preventDefault();
    self._handleFileSelections(e.originalEvent.dataTransfer.files);
});
4

2 に答える 2

39

新しいイベント ハンドラーをバインドする前に、既存のイベント ハンドラーのバインドを解除します。これは、名前空間付きのイベント[ドキュメント]を使用すると非常に簡単です。

$(document)
  .off('.upload') // remove all events in namespace upload
  .on({
      'dragenter.upload': function(e) {
          e.stopPropagation();
          e.preventDefault();
      },
      'dragover.upload': function(e) {
          e.stopPropagation();
          e.preventDefault();
      },
      // ...
  });
于 2012-07-23T12:58:08.700 に答える