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

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

news 2025/11/11 17:49:09

文章目录

    • 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

相关文章：

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

文章目录 1、界面基本布局2、代码实现3、参考链接 1、界面基本布局 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…...

编程日记 2024/6/26 8:33:36

MySQL 5.7.42 主从复制环境搭建

MySQL 5.7.42 主从复制环境搭建 下载MySQL二进制包操作系统环境配置安装过程搭建从库 本次安装环境&#xff1a; OS版本&#xff1a;Red Hat Enterprise Linux Server release 6.8 (Santiago) MySQL版本&#xff1a;5.7.42 架构&#xff1a;同一台机器&#xff0c;多实例安装搭…...

编程日记 2024/6/26 8:32:35

【Excel】单元格如何设置可选项、固定表头

设置可选项 固定表头&#xff1a;视图---冻结窗口...

编程日记 2024/6/26 8:31:34

大模型ReAct：思考与工具协同完成复杂任务推理

ReAct: Synergizing Reasoning and Acting in Language Models Github&#xff1a;https://github.com/ysymyth/ReAct 一、动机 人类的认知通常具备一定的自我调节&#xff08;self-regulation&#xff09;和策略制定&#xff08;strategization&#xff09;的能力&#xff0…...

编程日记 2024/6/26 8:29:32

深入了解银行核心账务系统及其测试的重要性

在数字化金融时代&#xff0c;银行的核心账务系统是保证银行业务稳定、安全运行的关键所在。这些系统&#xff0c;如核心账务系统、总账系统和财务会计管理系统&#xff0c;宛如银行的“中枢神经”&#xff0c;掌控着资金的流动和账务的处理。无论是存款、取款、贷款还是转账&a…...

编程日记 2024/6/26 8:28:30

实习公司内部OA系统项目经验

文章目录 前言一、请介绍一下你实习所做的项目？二、你觉得你项目的难点有哪些？三、你这个考勤打卡功能可以详细介绍一下吗1. 功能需求分析2. 系统设计与架构3. 数据库设计4. 具体实现5. 测试与优化四、Redis缓存技术用到哪里了请详细介绍一下1.应用场景2.缓存设计3.具体实现4…...

编程日记 2024/6/26 8:27:28

Ansys Zemax｜在设计抬头显示器(HUD)时需要使用哪些工具？

附件下载 联系工作人员获取附件 汽车抬头显示器或汽车平视显示器&#xff0c;也被称为HUD&#xff0c;是在汽车中显示数据的透明显示器&#xff0c;不需要用户低头就能看到他们需要的重要资讯。这个名字的由来是由于该技术能够让飞行员在头部“向上”并向前看的情况下查看信息…...

编程日记 2024/6/26 8:24:25

Linux系统移动光标类命令

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2024/6/26 8:23:24

Vitis Accelerated Libraries 学习笔记--Vision 库的组织结构

1. 简介 Vision 库的组织结构如下&#xff1a; ├── L1/ │ ├── README.md │ ├── examples/ │ ├── include/ │ ├── lib/ │ └── tests/ ├── L2/ │ ├── README.md │ ├── examples/ │ └── tests/ ├── L3/ │ ├── R…...

编程日记 2024/6/26 8:21:22

HTML+CSS 彩色浮雕按钮

效果演示 实现了一个彩色按钮特效&#xff0c;包括一个按钮&#xff08;button&#xff09;和一个前景色&#xff08;::before&#xff09;。按钮具有四种不同的颜色&#xff0c;当鼠标悬停在按钮上时&#xff0c;前景色会出现渐变效果&#xff0c;并且按钮的颜色、文本阴影和边…...

编程日记 2024/6/26 8:19:20

ChatBI开源实现: 基于SuperSonic的AI+BI的产品设计

产品起源 为什么要做这样的产品&#xff1f;文章《ChatBI开源实现: AIBI的产品设计》中有介绍 为什么要自己做这样的产品&#xff1f;1、低成本试错&#xff1b;2、未来数据生态入口&#xff1b; 为什么要基于Supersonic做&#xff1f; 开源协议友好&#xff1a;可魔改商用 社区…...

编程日记 2024/6/26 8:13:13

【嵌入式Linux】i.MX6ULL 外部中断服务函数的初始化

文章目录 1. Cortex-A7 中断系统1.1 分析1.2 具体处理流程 2. 外部中断服务函数的初始化2.1 基本流程分析2.2 具体代码分析2.2.1. 定义中断处理类型和结构体2.2.2. 初始化中断系统2.2.3. 注册中断处理函数2.2.4. 具体的中断处理逻辑2.2.5. 默认的中断处理函数 3. 完整代码 本文…...

编程日记 2024/6/26 8:10:10

线性代数、矩阵计算

一、线性代数 1、对于向量&#xff0c;若a是标量&#xff0c;为a的绝对值乘以b的向量长度。 2、点乘 3、范数&#xff1a;向量或者矩阵的长度 L1范数&#xff1a;&#xff08;对向量&#xff09;每个元素的绝对值求和 L2范数&#xff1a;&#xff08;对向量&#xff09;torch.…...

编程日记 2024/6/26 8:09:08

PostgreSQL 高级功能（五）

1. 存储过程与函数 1.1 创建存储过程 存储过程是一组预编译的SQL语句&#xff0c;可以简化复杂的操作。以下是一个简单的存储过程示例&#xff1a; CREATE OR REPLACE FUNCTION add_user(username VARCHAR, email VARCHAR) RETURNS VOID AS $$ BEGININSERT INTO users (use…...

编程日记 2024/6/26 8:04:02

食品企业仓储式批发零售一体化解决方案

食品企业需要有效应对日益复杂的市场挑战和消费者需求的快速变化的挑战并提升市场竞争力&#xff0c;仓储式类的批发零售一体化需求应运而生。这一全新的商业模式不仅整合了传统的批发和零售模式&#xff0c;还优化了供应链管理和客户体验&#xff0c;成为食品行业发展的新引擎…...

编程日记 2024/6/26 8:03:00

chrome插件，修改对应URL的http请求的header头，包括ajax请求

要创建一个可以灵活修改HTTP请求头的Chrome扩展&#xff0c;包括一个用户界面来动态设置头部名称和值&#xff0c;可以按照以下步骤进行。我们会用到 chrome.storage API 来保存用户的设置&#xff0c;并在后台脚本中使用这些设置来修改请求头。 文件结构 my_chrome_extensio…...

编程日记 2024/6/26 8:01:59

C语言 | Leetcode C语言题解之第191题位1的个数

题目&#xff1a; 题解&#xff1a; int hammingWeight(uint32_t n) {int ret 0;while (n) {n & n - 1;ret;}return ret; }...

编程日记 2024/6/26 8:00:57

【C++11(二)】lambda表达式和可变参数模板

一、可变参数模板 C11的新特性可变参数模板 能够让您创建可以接受 可变参数的函数模板和类模板 // Args是一个模板参数包&#xff0c;args是一个函数形参参数包 // 声明一个参数包Args...args&#xff0c;这个参数包中可以包含0到任意个模板参数。 template <class ...Arg…...

编程日记 2024/6/26 7:58:55

昇思25天学习打卡营第2天|张量Tensor

张量Tensor 创建张量张量的属性张量索引张量运算 稀疏张量 总结 简单讲讲张量&#xff0c;数学和物理学界以一种方式定义张量&#xff0c;机器学习上则是以另一种方式定义张量&#xff0c;这里的张量也与神经网络联系紧密&#xff0c;神经网络需要进行大量的数学计算&#xff0…...

编程日记 2024/6/26 7:57:54

[leetcode]valid-triangle-number. 有效三角形的个数

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int triangleNumber(vector<int>& nums) {int n nums.size();sort(nums.begin(), nums.end());int ans 0;for (int i 0; i < n; i) {for (int j i 1; j < n; j) {int left j 1, righ…...

编程日记 2024/6/26 7:56:52

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/11/8 2:06:55

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/11/7 14:06:38

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/11/7 19:35:58

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/8/21 20:41:27

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/10/24 14:12:54

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

编程新知 2025/11/10 12:32:53

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2025/7/24 5:10:25

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系&#xff0c;可直观判断线性相关、非线性相关或无相关关系&#xff0c;点的分布密…...

编程新知 2025/11/9 21:22:15