Question

为什么addEventListener只与CANCEL标签元素合作而不是第一个，即使我删除了第二个？我在控制台中没有收到任何错误消息。

var ctrl = document.createElement('div');
ctrl.id = 'ctrl';

var showhide = document.createElement('label');
showhide.id = 'showhide';
showhide.innerHTML = 'Show/hide output';
showhide.setAttribute('onclick', 'return false;');
showhide.addEventListener("click", function() {
  alert('Show/hide');
});

var cancel = document.createElement('label');
cancel.id = 'cancel';
cancel.innerHTML = 'CANCEL';
cancel.setAttribute('onclick', 'return false;');
//document.getElementById('showhide').insertAdjacentHTML('afterEnd', cancel.outerHTML);
cancel.addEventListener("click", function() {
  alert('cancel');
});

ctrl.appendChild(showhide)
ctrl.innerHTML += ' | '
ctrl.appendChild(cancel)
document.body.appendChild(ctrl)

Answer 1

上面代码中的罪魁祸首是ctrl.innerHTML += ' | ';注释掉代码，它会正常工作。原因是当您使用innerHTML时，内容会重新分配并重新评估，从而破坏现有事件。 Here is an example explained in StackOverflow answers.

为什么addEventListener不听我的话？

1 个答案: