JavaScript模态弹窗onclick关闭事件报错，疑与this关键字有关？

你的问题确实和this关键字有关，但还有另一个关键错误需要一起修复：

1. DOM元素获取的错误（非this相关，但会直接触发报错） #

getElementsByClassName返回的是HTMLCollection类数组集合，不是单个DOM元素。你直接给集合绑定onclick事件，相当于给集合对象本身加事件，这不符合DOM事件绑定规则，会直接报错。

修复方式： #

• 若页面只有一个关闭按钮，改用querySelector获取单个元素：

const close = document.querySelector(".closeBtn");
close.onclick = function () {
  modal.style.display = "none";
};

• 若有多个关闭按钮，遍历集合给每个元素绑定事件：

const closeBtns = document.getElementsByClassName("closeBtn");
for (let btn of closeBtns) {
  btn.onclick = function () {
    modal.style.display = "none";
  };
}

2. this关键字的误用（直接导致点击外部无法关闭弹窗） #

在window.onclick的回调函数里，this指向的是window全局对象，而你定义的modal是外层作用域的变量，window对象上并没有modal属性，所以event.target == this.modal的判断永远不成立，严格模式下还会抛出未定义错误。

修复方式： #

直接使用外层作用域的modal变量，去掉多余的this：

window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

把这两处错误修复后，模态弹窗的打开、关闭（点击关闭按钮/点击外部）逻辑就能正常运行了。

内容的提问来源于stack exchange，提问作者user20984971