博客
关于我
关于点击弹框外部区域弹框关闭的交互处理
阅读量:461 次
发布时间:2019-03-06

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

常见需求场景

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

解决方法

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

具体实现步骤如下:

  • 为弹框的父级div添加类名(例如:box-contentbox-filterbox-list等)。
  • 在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/

    你可能感兴趣的文章
    NoClassDefFoundError: org/springframework/boot/context/properties/ConfigurationBeanFactoryMetadata
    查看>>
    node exporter完整版
    查看>>
    Node JS: < 一> 初识Node JS
    查看>>
    Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime(72)
    查看>>
    Node 裁切图片的方法
    查看>>
    Node+Express连接mysql实现增删改查
    查看>>
    node, nvm, npm,pnpm,以前简单的前端环境为什么越来越复杂
    查看>>
    Node-RED中Button按钮组件和TextInput文字输入组件的使用
    查看>>
    Node-RED中Switch开关和Dropdown选择组件的使用
    查看>>
    Node-RED中使用html节点爬取HTML网页资料之爬取Node-RED的最新版本
    查看>>
    Node-RED中使用JSON数据建立web网站
    查看>>
    Node-RED中使用json节点解析JSON数据
    查看>>
    Node-RED中使用node-random节点来实现随机数在折线图中显示
    查看>>
    Node-RED中使用node-red-browser-utils节点实现选择Windows操作系统中的文件并实现图片预览
    查看>>
    Node-RED中使用node-red-contrib-image-output节点实现图片预览
    查看>>
    Node-RED中使用node-red-node-ui-iframe节点实现内嵌iframe访问其他网站的效果
    查看>>
    Node-RED中使用Notification元件显示警告讯息框(温度过高提示)
    查看>>
    Node-RED中使用range范围节点实现从一个范围对应至另一个范围
    查看>>
    Node-RED中实现HTML表单提交和获取提交的内容
    查看>>
    Node-RED中将CSV数据写入txt文件并从文件中读取解析数据
    查看>>