关于js点击事件的一个问题?

作者站长头像
站长
· 阅读数 8

问题说明:比如页面中有一个输入框元素a,我点击它时会弹出一个窗体b,我在a blur事件中关闭弹出窗体(这种方法就无法点击b窗体中的内容了),如何做到我点击除a/b外的元素才关闭弹出窗体?不会是给所有对象加监测事件吧?

回复
1个回答
avatar
test
2024-06-28

不在 输入框ablur 事件中关闭 窗体b,而是为 document 添加 click 事件监听,判断点击元素是否为 输入框a 或者 窗体b,若不是则关闭 窗体b,示例如下:

const input = ...;
const popup = ...;

function listener({ target }) {
  if (target !== input && target !== popup && !popup.contains(target)) {
    // 关闭窗体b
  }
}

document.addEventListener("click", listener);

// document.removeEventListener("click", listener);

注意,若为单页面应用,应该在合适的时机 注册/销毁documentclick 事件监听,以避免异常情况发生。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容