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

点击元素以外的事件监听

news 2026/5/13 0:05:30

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

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

我希望点击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

北京AGG聚砂吸声板哪家性价比高

在选择AGG聚砂吸声板时&#xff0c;“性价比”往往不只是看价格&#xff0c;而是综合考量声学性能、施工服务、材料稳定性和后期维护的平衡。北京市场上的供应商不少&#xff0c;但真正能长期稳定输出成熟产品的&#xff0c;需要从几个实际角度去判断。首先&#xff0c;要优先看…...

编程新知 2026/5/12 22:15:43

微创式电子设备设计：从自动化到自主化的智能革命

1. 项目概述&#xff1a;从“工具”到“魔法”的隐形革命十几年前&#xff0c;我在《EE Times》上读到一篇由西蒙巴克&#xff08;Simon Barker&#xff09;撰写的文章&#xff0c;标题是一个直击灵魂的提问&#xff1a;“微创式电子设备在哪里&#xff1f;” 这个问题像一颗种…...

编程新知 2026/5/12 22:02:43

2025届学术党必备的五大降重复率方案横评

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 当下知网已然上线了AI检测功能&#xff0c;会针对论文里疑似人工智能生成的内容展开识别。为…...

编程新知 2026/5/12 21:58:37

基于MCP协议构建Jira Tempo工时管理AI助手：从原理到实践

1. 项目概述&#xff1a;一个专为Jira Tempo设计的MCP服务器 如果你和我一样&#xff0c;每天都要在Jira里手动填写Tempo工时&#xff0c;然后对着那些重复的、琐碎的操作感到厌倦&#xff0c;那么这个项目可能就是你的“救星”。 ivelin-web/tempo-mcp-server 是一个基于Mo…...

编程新知 2026/5/12 18:18:07

2026年图片换背景免费工具完全指南：一键抠图软件推荐

现在是5月&#xff0c;我想很多人都在为各种证件照、商品图、头像等需要换背景的图片犯愁。前两天有朋友问我"哪个软件可以给图片换背景"&#xff0c;我才意识到很多人还在用古老的PS或者繁琐的在线工具。今天就来给大家分享一下2026年最好用的图片换背景工具&#x…...

编程新知 2026/5/12 17:56:40

保姆级教程：用Forge 1.16.3给你的Minecraft服务器装Mod，从下载到联机全流程

保姆级教程&#xff1a;用Forge 1.16.3给你的Minecraft服务器装Mod&#xff0c;从下载到联机全流程 和朋友一起玩Minecraft原版生存久了&#xff0c;难免会想尝试更多新玩法。Mod能为游戏带来全新生物、装备、魔法系统甚至维度冒险&#xff0c;但很多玩家在搭建Mod服务器时会被…...

编程新知 2026/5/12 16:51:26

从仿真卡死到波形完美：手把手调试Verilog Testbench时钟的那些坑

从仿真卡死到波形完美&#xff1a;手把手调试Verilog Testbench时钟的那些坑 数字电路仿真中&#xff0c;时钟信号就像交响乐团的指挥棒&#xff0c;一个微小的节奏错误就可能导致整个系统失序。刚接触Verilog仿真的工程师们&#xff0c;往往会在时钟生成这个看似简单的环节栽跟…...

编程新知 2026/5/12 16:17:55

国家中小学智慧教育平台电子课本下载工具：教育资源获取的完整解决方案

国家中小学智慧教育平台电子课本下载工具&#xff1a;教育资源获取的完整解决方案 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#xff0c;让您更方便地获取课本内…...

编程新知 2026/5/12 16:09:13

Fast-GitHub：3个技巧让国内开发者告别GitHub龟速时代

Fast-GitHub&#xff1a;3个技巧让国内开发者告别GitHub龟速时代 【免费下载链接】Fast-GitHub 国内Github下载很慢&#xff0c;用上了这个插件后&#xff0c;下载速度嗖嗖嗖的~&#xff01; 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub 你是否曾经因为Gi…...

编程新知 2026/5/12 14:49:41

AI编程规划工具vibe-driven-dev：从模糊想法到清晰开发蓝图

1. 项目概述&#xff1a;从“感觉”到“计划”的桥梁在AI编程助手&#xff08;或者说“编码智能体”&#xff09;越来越普及的今天&#xff0c;一个常见的困境是&#xff1a;我们脑子里有一个很棒的产品想法&#xff0c;但当你试图把它交给Claude Code、Cursor或者Windsurf这类…...

编程新知 2026/5/12 14:28:52