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

点击元素以外的事件监听

news 2025/7/2 21:42:00

在项目中，我们经常会遇到需要监听目标元素以外的区域被点击或鼠标移入移出等需求。

例如下面我们有一个表格里面嵌套表单的组件
默认展示

我希望点击n行的时候，n行的元素变成表单元素进行输入或者选择，
点击该行

当我点击其他其他区域n行又会恢复成数据展示的样子。
默认展示
那现在我们来想想这种监听应该如何实现呢？

contains

如果你听说过 contains这个方法，那么你会豁然开朗。这个方法的作用是用来判断一个元素是否包含另一个元素。那么如果我们通过事件对象拿到当前事件的目标元素，再通过 contains去判断这个目标元素有没有在我们需要监听的元素内部，就可以轻易实现我们的需求了。

上代码

<!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>body {margin: 0;padding: 0;background-color: aqua;width: 100vw;height: 100vh;}.parent {width: 100px;height: 100px;background-color: yellow;}.son {position: relative;left: 30px;top: 30px;width: 30px;height: 30px;background-color: red;}</style>
</head><body><div class="parent"><div class="son"></div></div><script>const parentEle = document.querySelector('.parent')document.body.addEventListener('click', e => {const target = e.targetif (parentEle.contains(target)) {alert('点击了元素包含区域')} else {alert('点击了元素以外区域')}})</script>
</body></html>

也附上一个可以直接预览效果的地址

当然，我们可以做到更加便捷。如果是在vue项目里我们可以创建一个自定义指令的方式便捷实现监听效果。

export default function install(Vue) {Vue.directive('clickoutside', {bind(el, { value: fun, arg }) {console.log(arg)arg = arg || 'click'document.addEventListener(arg, handleFun.bind(null, el, fun))},unbind(el, { arg }) {document.removeEventListener(arg, handleFun)},})
}function handleFun(el, fun, e) {let flag = el.contains(e.target)if (!flag) {fun()}
}
<button v-clickoutside="fn">按钮</button>

上面是一个极其简单的自定义指令，默认监听点击事件，它可以用来监测点击的元素是否在我们所监测的元素内。不在则执行指令绑定的方法。

最后再补充一个，如果你使用了element-ui，那么他的内部其实是自带了这样一个方法的。
你可以像这样进行引用

import clickoutside from 'element-ui/src/utils/clickoutside'

相关文章：

点击元素以外的事件监听

在项目中&#xff0c;我们经常会遇到需要监听目标元素以外的区域被点击或鼠标移入移出等需求。 例如下面我们有一个表格里面嵌套表单的组件 我希望点击n行的时候&#xff0c;n行的元素变成表单元素进行输入或者选择&#xff0c; 当我点击其他其他区域n行又会恢复成数据展示…...

编程日记 2023/12/4 15:42:45

猫头虎分享ubuntu20.04下VSCode无法输入中文解决方法

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/12/4 15:40:43

tcpdump使用心得

参考原文 https://danielmiessler.com/p/tcpdump/ 几个用例 tcpdump -i eth0 显示eth0网卡当前所有的抓包情况eth0是网卡名&#xff0c;可以通过ifconfig获得&#xff0c;也可以通过 tcpdump -D 显示当前可以监听的网卡 -i 参数表示接口&#xff0c;后跟要监听的网卡 tcpdu…...

编程日记 2023/12/4 15:39:42

QJsonObject 是 Qt 框架中用于表示 JSON 对象的类

QJsonObject 是 Qt 框架中用于表示 JSON 对象的类。 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;常用于在不同平台和语言之间传输和存储数据。QJsonObject 类提供了一种方便的方式来创建、解析和操作 JSON 对象。 以下是…...

编程日记 2023/12/4 15:38:40

kafka3.6.0部署

部署zk https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/zookeeper-3.9.1/apache-zookeeper-3.9.1.tar.gz tar -xf apache-zookeeper-3.9.1.tar.gz -C /apps cd /apps/ && ln -s apache-zookeeper-3.9.1 zookeeper 修改配置bash grep -vE ^$|^# conf/zo…...

编程日记 2023/12/4 15:33:35

MybatisPlus批量插入（伪批量），增强为真实批量插入

项目基于优秀开源项目&#xff1a;若依 项目背景&#xff1a;项目中牵扯到数据批量导入&#xff0c;为提高性能&#xff0c;先考虑将MybatisPlus伪批量插入增强为真实批量插入 MybatisPlus源码&#xff1a; MybatisPlus支持批量插入&#xff0c;但是跟踪源码发现底层是将批量…...

编程日记 2023/12/4 15:26:29

【零基础入门Python】Python If Else流程控制

✍面向读者&#xff1a;所有人 ✍所属专栏&#xff1a;零基础入门Pythonhttps://blog.csdn.net/arthas777/category_12455877.html Python if语句 Python if语句的流程图 Python if语句示例 Python If-Else Statement Python if else语句的流程图 使用Python if-else语句 …...

编程日记 2023/12/4 15:25:28

新手零基础学习彩铅画，彩铅快速入门教程合集

一、教程描述 画画是很美好的一件事情&#xff0c;你可以把你想到的&#xff0c;或者看到的都画下来&#xff0c;照相机可以拍下任何你看到的&#xff0c;但是你想到的任何事物&#xff0c;只能通过绘画的方式来表达。本套教程是非常不错的&#xff0c;彩铅的小视频教程&#…...

编程日记 2023/12/4 15:24:28

线程池的拒绝策略

文章目录 线程池的拒绝策略AbortPolicy拒绝策略&#xff1a;CallerRunsPolicy拒绝策略&#xff1a;DiscardOldestPolicy拒绝策略&#xff1a;DiscardPolicy拒绝策略&#xff1a; 线程池的拒绝策略 若在线程池当中的核心线程数已被用完且阻塞队列已排满&#xff0c;则此时线程池…...

编程日记 2023/12/4 15:23:27

Redis7--基础篇5（管道、发布订阅）

管道是什么 管道(pipeline)可以一次性发送多条命令给服务端&#xff0c;服务端依次处理完完毕后&#xff0c;通过一条响应一次性将结果返回&#xff0c;通过减少客户端与redis的通信次数来实现降低往返延时时间。pipeline实现的原理是队列&#xff0c;先进先出特性就保证数据的…...

编程日记 2023/12/4 15:22:26

Unity中Shader指令优化（编译后指令解析）

文章目录 前言一、我们先创建一个简单的Shader二、编译这个Shader&#xff0c;并且打开1、编译后注意事项2、编译平台 和 编译指令数3、顶点着色器用到的信息4、顶点着色器计算的核心部分5、片元着色器用到的信息6、片元着色器核心部分 前言 我们先读懂Shader编译后代码&#…...

编程日记 2023/12/4 15:21:25

单个 Zip 文件体积超过 40GB

单个 Zip 文件体积超过 40GB WinRAR 平时用的多,不过有时候为了更好的通用性,也常常用到 zip 格式.查了一下资料,说是 zip 单个文件的体积不能超过 4GB. 自己动手试了下,用 WinRAR 创建出来的 zip 文件,大小可以超过 40GB, 如下图 为了压缩速度快,压缩方式用的是 “存储” Wi…...

编程日记 2023/12/4 15:20:24

pandas 基础操作3

数据删减 虽然我们可以通过数据选择方法从一个完整的数据集中拿到我们需要的数据&#xff0c;但有的时候直接删除不需要的数据更加简单直接。Pandas 中&#xff0c;以 .drop 开头的方法都与数据删减有关。 DataFrame.drop 可以直接去掉数据集中指定的列和行。一般在使用时&am…...

编程日记 2023/12/4 15:19:23

开发知识点-Maven包管理工具

Maven包管理工具 SpringBootSpringSecuritydubbo图书电商后台实战-环境设置&#xff08;JDK8, STS, Maven, Spring IO, Springboot&#xff09;点餐小程序Java版本的选择和maven仓库的配置视频管理系统&&使用maven-tomcat7插件运行web工程SpringTool suite——maven项目…...

编程日记 2023/12/4 15:16:21

104. 二叉树的最大深度

104. 二叉树的最大深度 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right…...

编程日记 2023/12/4 15:14:19

JAVA毕业设计113—基于Java+Springboot+Vue的体育馆预约系统(源代码+数据库+12000字论文)

基于JavaSpringbootVue的体育馆预约系统(源代码数据库12000字论文)113 一、系统介绍 本项目前后端分离&#xff0c;本系统分为管理员、用户两种角色 用户角色包含以下功能&#xff1a; 注册、登录、场地(查看/预订/收藏/退订)、在线论坛、公告查看、我的预订管理、我的收藏…...

编程日记 2023/12/4 15:10:15

【自动化测试】pytest 用例执行中print日志实时输出

author: jwensh date: 20231130 pycharm 中 pytest 用例执行中 print 日志 standout 实时命令行输出 使用场景 在进行 websocket 接口进行测试的时候&#xff0c;希望有一个 case 是一直执行并接受接口返回的数据 def on_message(ws, message):message json.loads(message)…...

编程日记 2023/12/4 15:09:13

【深度学习】KMeans中自动K值的确认方法

1 前言 聚类常用于数据探索或挖掘前期&#xff0c;在没有做先验经验的背景下做的探索性分析&#xff0c;也适用于样本量较大情况下的数据预处理等方面工作。例如针对企业整体用户特征&#xff0c;在未得到相关知识或经验之前先根据数据本身特点进行用户分群&#xff0c;然后再…...

编程日记 2023/12/4 15:08:12

github问题解决（持续更新中）

1、ssh: connect to host github.com port 22: Connection refused 从.ssh文件夹中新建文件名为config&#xff0c;内容为&#xff1a; Host github.com Hostname ssh.github.com Port 4432、解决 git 多用户提交切换问题 使用系统命令ssh创建rsa公私秘钥 C:\Users\fyp01&g…...

编程日记 2023/12/4 15:07:11

如何创建一个vue工程

1.打开vue安装网址&#xff1a;安装 | Vue CLI (vuejs.org) 2.创建一个项目文件夹 3.复制地址 4.打开cmd&#xff0c;进入这个地址 5.复制粘贴vue网页的安装命令 npm install -g vue/cli 6.创建vue工程 vue create vue这里可以通过上下键来进行选择。选最后一个选项按回车。 …...

编程日记 2023/12/4 15:06:10

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/6/26 1:51:25

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/6/27 20:14:31

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2025/6/28 13:43:55

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/6/25 2:12:34

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

编程新知 2025/6/29 3:41:03

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2025/6/30 13:23:52

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

编程新知 2025/6/24 4:56:47

Qwen系列之Qwen3解读：最强开源模型的细节拆解

文章目录 1.1分钟快览2.模型架构2.1.Dense模型2.2.MoE模型 3.预训练阶段3.1.数据3.2.训练3.3.评估 4.后训练阶段S1: 长链思维冷启动S2: 推理强化学习S3: 思考模式融合S4: 通用强化学习 5.全家桶中的小模型训练评估评估数据集评估细节评估效果弱智评估和民间Arena 分析展望 如果…...

编程新知 2025/6/26 10:07:36

C++中vector类型的介绍和使用

文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...

编程新知 2025/6/21 9:43:11

el-amap-bezier-curve运用及线弧度设置

文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 ‌el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件，用于在 高德地图 上绘制贝塞尔曲线。‌ 基本用法属性path定义曲线的路径，可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...

编程新知 2025/6/23 5:59:36