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

所以如果你去这里
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方法，则无法复制问题。

最佳答案

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处理程序来解决此问题。

关于javascript - 带有ESC键关闭弹出窗口的VanillaJS问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57119792/