本文共 1241 字，大约阅读时间需要 4 分钟。

常见需求场景

在前端开发中，处理交互时常遇到以下场景：点击按钮后，出现一个弹框，用户点击外部区域时，弹框关闭。这种需求虽然简单，但实现起来需要仔细考虑细节。

解决方法

解决这个问题的思路是：通过给弹框的父级div添加特定的类名，并在document上绑定点击事件，来判断点击的区域是否是弹框之外的区域。

具体实现步骤如下：

代码实现

以下是具体的代码实现方式：

document.addEventListener('click', e => {    if (this.boxShow) {        this.closeBox(e);    }});closeBox(e) {    e.stopPropagation(); // 阻止事件冒泡    const parentNames = this.getParentsClassName(e.target);        // 判断是否点击了外部区域    if (!parentNames.includes('box-content') &&         !parentNames.includes('box-filter') &&         !parentNames.includes('box-list')) {        this.boxShow = false;    }}getParentsClassName(el) {    let p = el.parentNode;    const parents = new Set();    parents.add(el.className);        while (p && p.tagName !== 'BODY') {        parents.add(p.className);        p = p.parentNode;    }        return Array.from(parents);}

以上代码实现的逻辑是：

• 当document发生点击事件时，检查是否正在显示弹框（this.boxShow）。
• 调用closeBox方法处理关闭逻辑。
• closeBox方法通过getParentsClassName获取当前元素及其父级元素的类名集合。
• 如果类名集合中不包含预定义的弹框相关类名，则关闭弹框。
• getParentsClassName方法用于获取元素及其所有父级元素的类名，返回一个类名数组。

这种解决方案能够有效区分用户点击的区域，是处理类似需求的常用方法。

转载地址：http://vfubz.baihongyu.com/