关于js点击事件的一个问题?
问题说明:比如页面中有一个输入框元素a,我点击它时会弹出一个窗体b,我在a blur事件中关闭弹出窗体(这种方法就无法点击b窗体中的内容了),如何做到我点击除a/b外的元素才关闭弹出窗体?不会是给所有对象加监测事件吧?
回复
1个回答
test
2024-06-28
不在 输入框a
的 blur
事件中关闭 窗体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);
注意,若为单页面应用,应该在合适的时机 注册/销毁
对 document
的 click
事件监听,以避免异常情况发生。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容