Question

编辑，通过使用jQuery的.on()方法并通过.off()和.unbind()删除事件来解决。

我有一个简单的拖放上传系统。一切正常，直到我重新初始化函数。问题是在我尝试取消绑定之前，第二个初始化事件仍然绑定。

我想保持添加事件侦听器的方式，只是想在添加新事件之前先删除旧的事件。

例如检查jsfiddle（尝试将某些文件拖放到黑匣子中）。您可以看到console.log()在重新初始化后运行了两次。

function init() {
  console.log('init')
  var dropZone = $('.dropZone');
  var dropZoneEvent = dropZone.get(0);

  function dragEnter(ev) {
    ev.preventDefault();
    console.log('drag enter');
  }

  function dragOver(ev) {
    ev.preventDefault();
    
  }

  function dragLeave(ev) {
    ev.preventDefault();
    console.log('drag leave');
  }

  function drop(ev) {
    ev.preventDefault();
    console.log("drop");
  }

	dropZoneEvent.removeEventListener('dragenter', dragEnter, false);
  dropZoneEvent.removeEventListener('dragover', dragOver, false);
  dropZoneEvent.removeEventListener('dragleave', dragLeave, false);
  dropZoneEvent.removeEventListener('drop', drop, false);

  dropZoneEvent.addEventListener('dragenter', dragEnter, false);
  dropZoneEvent.addEventListener('dragover', dragOver, false);
  dropZoneEvent.addEventListener('dragleave', dragLeave, false);
  dropZoneEvent.addEventListener('drop', drop, false);
}

init();

$(document).on('click', '.reinit', function() {
  init();
});

.dropZone {
  width: 200px;
  height: 80px;
  background: black;
}
.reinit{
  width: 200px;
  height: 40px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropZone"></div>
<div class="reinit">Click me to reinit</div>

Answer 1

这是因为您的事件函数在init内部范围内。而且，每次运行init时，这些功能都不会指向相同的引用。从init中删除这些函数，并将它们放在全局范围内，它将很好地工作。

初始化时删除事件监听器

1 个答案: