当前位置: 首页 > news >正文

【日常记录】【JS】优雅检测用户是否在指定元素的外部点击

文章目录

    • 1、界面基本布局
    • 2、代码实现
    • 3、参考链接

1、界面基本布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {height: 100vh;width: 100vw;}.box {width: 80vw;height: 80vh;background-color: aquamarine;}.box2 {width: 50vw;height: 50vh;background-color: rgb(247, 7, 95);}.box3 {width: 30vw;height: 30vh;background-color: rgb(119, 235, 4);}</style>
</head><body><div class="box">第一层DIV<div class="box2">第二层DIV<div class="box3">第三层DIV<p style="height: 100px;background-color: blueviolet;">第四层 P</p></div></div></div></body></html>

2、代码实现

Node.contains()

  • 此方法返回一个布尔值,表示一个节点是否是给定节点的后代,即该节点本身、其直接子节点(childNodes)、子节点的直接子节点等。
  <script>// 判断用户是不是点击,第三层 DIV 以外的区域let box3El = document.querySelector('.box3')document.addEventListener('click', (e) => {let curEl = e.targetif (box3El.contains(curEl)) {console.log('点击元素在  第三层DOM 里面');} else {console.log('点击元素 不在    第三层DOM 里面');}console.log('当前实际点击的DOM', e.target);})</script>

在这里插入图片描述

当鼠标点击这个红框的时候,e.target 指向的是 box2,从上面的DOM结构上可以看出,box2 不在 box3 里面,所以返回 false

在这里插入图片描述

实际触发的是 box3 ,代码写的是 box3El.contains(curEl), 因为这个方法本身就是,如若 这个方法你传入的和 box3El 相等,那他还是返回 true

在这里插入图片描述

这个时候实际触发的是 p 标签,因为在DOM层级上 p标签 属于 box3 所以这个时候也是返回的 true

3、参考链接

  • Node.contains() MDN
http://www.lryc.cn/news/383456.html

相关文章:

  • MySQL 5.7.42 主从复制环境搭建
  • 【Excel】单元格如何设置可选项、固定表头
  • 大模型ReAct:思考与工具协同完成复杂任务推理
  • 深入了解银行核心账务系统及其测试的重要性
  • 实习公司内部OA系统项目经验
  • Ansys Zemax|在设计抬头显示器(HUD)时需要使用哪些工具?
  • Linux系统移动光标类命令
  • Vitis Accelerated Libraries 学习笔记--Vision 库的组织结构
  • HTML+CSS 彩色浮雕按钮
  • ChatBI开源实现: 基于SuperSonic的AI+BI的产品设计
  • 【嵌入式Linux】i.MX6ULL 外部中断服务函数的初始化
  • 线性代数、矩阵计算
  • PostgreSQL 高级功能(五)
  • 食品企业仓储式批发零售一体化解决方案
  • chrome插件,修改对应URL的http请求的header头,包括ajax请求
  • C语言 | Leetcode C语言题解之第191题位1的个数
  • 【C++11(二)】lambda表达式和可变参数模板
  • 昇思25天学习打卡营第2天|张量Tensor
  • [leetcode]valid-triangle-number. 有效三角形的个数
  • java SQL server 多实例的情况
  • html--404页面
  • [word] Word如何删除所有的空行? #职场发展#学习方法
  • 【CSS】深入探讨 CSS 的 `calc()` 函数
  • MongoDB异地备份数据文件脚本(带日志打印,便于排查)
  • 论文导读 | Manufacturing Service Operations Management近期文章精选
  • 【Linux命令】top linux下的任务管理器
  • 2024年在分数限制下,选好专业还是选好学校?
  • cropperjs 裁剪/框选图片
  • ArkTS开发系列之事件(2.8.2手势事件)
  • 【MATLAB源码-第135期】基于matlab的变色龙群优化算法CSA)机器人栅格路径规划,输出做短路径图和适应度曲线。