Question

所以如果你去这里 https://quantumjs.github.io/solar-popup/demo/dist/ 然后单击第一个按钮，然后关闭弹出窗口如果您再次单击该按钮，然后关闭弹出窗口，则会在控制台中收到错误消息：未捕获的TypeError：无法读取null的属性'removeChild'

可以在浏览器中调试源，有问题的行是SolarPopup.ts：122或可以在github https://github.com/quantumjs/solar-popup/blob/master/src/SolarPopup.ts#L122中看到

仅当您按ESC键并按x没问题时，这种情况才会发生：

如果使用调试器暂停destroy方法，则无法复制问题。

Answer 1

TL; RD

代码正在为destroyBoundWithThis的当前实例和所有旧实例调用SolarPopup方法

注意：第一次使用 ESC 会按预期工作，并且不会引发任何错误

发生此错误的原因是，为处理SolarPopup事件而注册的函数（是的，每个"keyup"实例都有一个新函数）正在调用destroyBoundWithThis以获取对已“销毁”实例的旧引用。的SolarPopup并没有真正消失，而只是与DOM分离（因此它们不再具有parentElement）。

document.addEventListener(
  "keyup", // <=== registers a new handler for every instance
  function(event) {
    if (event.keyCode === KeyCodes.ESC) {
      this.destroyBoundWithThis()
    }
  }.bind(this) // <=== this could point to "destroyed" instances
)

https://github.com/quantumjs/solar-popup/blob/master/src/SolarPopup.ts#L85-L92

您可以通过在销毁"keyup"实例时注销SolarPopup处理程序来解决此问题

带有ESC键关闭弹出窗口的VanillaJS问题

1 个答案: