在 Javascript 中删除 eventListener答案

【问题标题】：Remove eventListener in Javascript在 Javascript 中删除 eventListener
【发布时间】：2016-07-06 15:30:19
【问题描述】：

我有以下情况：

一个section，ID为#section，在双击上我正在添加一个包含labels、inputs、save button和close form button的表单。

对于 click 上的close form 按钮，我有另一个事件来删除表单，它不想工作。你能告诉我这段代码有什么问题吗？

var setAttributes = function setAttributes(el, attrs) {
  for (var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
};

function createForm() {
  var form = document.createElement('form');
  setAttributes(form, {
    'class': 'hotspot-form'
  });

  var labelT = document.createElement('label');
  setAttributes(labelT, {
    'for': 'title'
  });
  labelT.innerHTML = 'Title';

  var inputT = document.createElement('input');
  setAttributes(inputT, {
    'type': 'text',
    'name': 'title',
    'id': 'inputTitle'
  });

  var labelD = document.createElement('label');
  setAttributes(labelD, {
    'for': 'description'
  });
  labelD.innerHTML = 'Description';

  var inputD = document.createElement('input');
  setAttributes(inputD, {
    'type': 'text',
    'name': 'description',
    'id': 'inputDescription'
  });

  var saveButton = document.createElement('button');
  setAttributes(saveButton, {
    'id': 'button-save',
    'type': 'submit'
  });
  saveButton.innerHTML = 'Save';

  var closeButton = document.createElement('button');
  setAttributes(closeButton, {
    'id': 'button-close',
    'type': 'button'
  });
  closeButton.innerHTML = 'Close Form';

  form.appendChild(labelT);
  form.appendChild(inputT);
  form.appendChild(labelD);
  form.appendChild(inputD);
  form.appendChild(saveButton);
  form.appendChild(closeButton);
  return form;
}
var section = document.querySelector('#section');
console.log(section);
section.addEventListener('dblclick', addForm, false);

function addForm() {
  var form = createForm();

  section.appendChild(form);
  var inputT = form.querySelector('#inputTitle');
  var inputD = form.querySelector('#inputDescription');
  var saveButton = form.querySelector('#button-save');
  var closeButton = form.querySelector('#button-close');

  inputT.addEventListener('input', saveInput, false);
  inputD.addEventListener('input', saveInput, false);

  function saveInput() {
    var newTitle = inputT.value;
    var newDescription = inputD.value;

  }
  closeButton.addEventListener('click', function() {
    section.removeEventListener('dblclick', addForm, false);
  }, false);
}

#section {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
.hotspot-form {
  background-color: #3d3d3d;
  padding: 5px;
}
.hotspot-form label {
  display: inline-block;
  color: #ffffff;
}
.hotspot-form input {
  display: inline-block;
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}

&lt;section id="section"&gt;&lt;/section&gt;

【问题讨论】：

其实你没有有关闭表单的事件；你有一个事件来阻止双击发生，但只有在关闭表单时（我猜这是你想要双击工作的那一刻）。您要在关闭按钮中做的是重新添加双击发生后删除的双击事件，然后删除表单。一切正常，但因为它只是添加和删除事件侦听器，您没有看到效果。
所以，当您单击“关闭表单”按钮时，必须删除该特定表单，对吧？
我不这么认为，因为如果我在closeButton.addEventListener('click', function() { ...}); 中添加console.log('Close Button"');，控制台会显示文本
嗯，是的，该事件正在被触发，但该事件的结果不是您所期望的。 Barmar 在下面有一个可能是您的问题的答案，但我也认为您的 dblclick 删除没有意义（打开表单时双击将打开新表单，但关闭一个并且双击永远停止......）无论如何，效果是不可见的。我说你的代码正在运行。
我知道如果我将 button 的 type 更改为 submit 表单会关闭，但我希望能够使用任何类型的元素删除 eventListener

标签： javascript dom-events addeventlistener event-listener

【解决方案1】：

您的关闭按钮事件处理程序不会删除表单，它只是从该部分中删除双击事件处理程序。要删除表单，它应该是：

closeButton.addEventListener("click", function() {
    section.removeChild(form);
});

【讨论】：