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

window.getSelection() 获取划线内容并实现 dom 追随功能

news 2026/1/16 19:04:36

功能：鼠标对一段文本中某些文字进行划线之后，需要在当前划线文本处出现一个功能按钮显示对划线内容进行操作，比如收藏、添加样本库等功能。

一、需要了解的鼠标事件对象属性

给 dom 元素注册鼠标事件之后，会有 event 属性，要实现划线之后出现 “请选择复制或者删除”的功能，需要找到划线结束时的位置坐标（相对于当前页面的，包括滚动条），下面是三种不同的 event 属性的位置属性，我们需要使用的是 event.pageX, event.pageY

document.querySelector(".wrap").onmouseup = function (event) {console.log(event.clientX, event.clientY); // 视口位置（客户端位置），不包括滚动条console.log(event.pageX, event.pageY); // 页面位置，包括滚动条console.log(event.screenX, event.screenY); // 屏幕位置（也叫全屏位置）
}

二、整体实现流程

1、给文本整体 dom 绑定相对定位并注册 onmouseup 事件，用于获取 event 属性

2、触发 onmouseup 之后，获取页面位置

3、判断划线是否有内容，window.getSelection().toString().length !== 0

4、如果有划线内容，创建提示性 dom 元素，并指定绝对定位，分别设置 top，left 属性

5、这样就实现啦！大家遇到这样的需求不需要慌啦~

三、整体代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>实现鼠标划线选中文本并进行操作</title><style>.wrap {position: relative;left: 0;width: 800px;margin-left: 20px;height: 300px;background-color: #f99;color: #1c1717;}</style></head><body><div class="wrap" onmouseup="handleMouseUp(event)">生活中总有一些美好的瞬间，让我们感受到温暖与幸福。清晨，阳光透过窗帘洒在床上，鸟儿在窗外欢快地歌唱，这一刻，仿佛整个世界都在呼唤新的开始。午后，和朋友一起漫步在公园，微风拂面，花香四溢，彼此的欢声笑语交织成一幅美丽的画卷。傍晚，夕阳西下，天边染上了绚丽的色彩，静坐在阳台，品一杯茶，心中涌起无尽的感慨。生活的点滴，正是这些简单而真实的瞬间，让我们在忙碌中找到宁静，在喧嚣中感受温暖。珍惜每一个当下，学会用心去感受生活的美好，无论是微小的快乐，还是深刻的感动，这些瞬间都将成为我们生命中最珍贵的记忆。让我们在平凡中发现不平凡，在日常中体会生活的深意。</div><script>document.querySelector(".wrap").onmouseup = function (event) {console.log(window.getSelection().toString());if (window.getSelection().toString().trim().length === 0) return;const dom = document.createElement("div");dom.style.position = "absolute";dom.style.top = event.pageY + "px";dom.style.left = event.pageX + "px";dom.style.background = "#fff";dom.innerHTML = "请选择复制或者删除";this.appendChild(dom);};</script></body>
</html>

相关文章：

window.getSelection() 获取划线内容并实现 dom 追随功能

功能&#xff1a;鼠标对一段文本中某些文字进行划线之后&#xff0c;需要在当前划线文本处出现一个功能按钮显示对划线内容进行操作&#xff0c;比如收藏、添加样本库等功能。 一、需要了解的鼠标事件对象属性 给 dom 元素注册鼠标事件之后&#xff0c;会有 event 属性&#…...

编程日记 2024/12/18 11:14:26

【人工智能】基于Python的自然语言处理：深入实现文本相似度计算

解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 文本相似度计算是自然语言处理（NLP）中的核心任务，广泛应用于搜索引擎、推荐系统、问答系统等领域。本文全面解析文本相似度计算的核心技术，使用Python中的spaCy和sentence-transformers库实现多种方法，包括基…...

编程日记 2024/12/18 11:10:21

布局、组成部分

布局 线性布局 (Row/Column) 线性容器Row和Column构建&#xff0c;Column容器内子元素按照垂直方向排列&#xff0c;Row容器内子元素按照水平方向排列。 在布局容器内&#xff0c;可以通过space属性设置排列方向上子元素的间距&#xff0c;使各子元素在排列方向上有等间距效…...

编程日记 2024/12/18 11:05:15

Go, Jocko, Kafka

本篇内容是根据2016年8月份# 31. Go, Jocko, Kafka 音频录制内容的整理与翻译 Travis Jeffery 参加了节目&#xff0c;谈论 Go、Jocko、Kafka、Kafka 的存储内部结构如何工作&#xff0c;以及有趣的 Go 项目和新闻。 Erik St. Martin: 大家好&#xff0c;欢迎回到《GoTime》的另…...

编程日记 2024/12/18 11:03:13

CANoe 报文仿真

文章目录 一、单个/少数报文仿真1、Canoe 发送报文2、可以自定义该报文发送节点3、添加报文4、触发方式 二、ECU节点仿真1、导入DBC&#xff0c;添加节点2. 选择节点中的哪些报文可以发送3. 更新ECU 节点发送的报文数据 三、开始仿真激活/失效该 ECU节点 一、单个/少数报文仿真…...

编程日记 2024/12/18 11:02:12

升级thinkphp8最新版本，升级后发现版本不变

升级thinkphp8.0.3最新版本8.1.1&#xff0c;升级后发现版本不变&#xff0c; 更新TP有两个方法 1 全部更新(所有插件都一起更新) composer update 2 只更新TP框架核心 composer update topthink/framework 造成可能有两个原因&#xff0c;一是缓存问题&#xff0c;二是更新…...

编程日记 2024/12/18 10:56:03

工业大数据分析算法实战-day07

文章目录 day07概率图模型朴素贝叶斯&#xff08;Naive Bayes&#xff09;贝叶斯网络&#xff08;Bayesian Network&#xff09;一般图模型生成式和判别式模型图模型结构与模型推理 集成学习Boosting算法Stacking算法 day07 今天是第七天&#xff0c;昨日主要针对是第三章节中…...

编程日记 2024/12/18 10:54:01

六、nginx负载均衡

负载均衡&#xff1a;将四层或者七层的请求分配到多台后端的服务器上。 从而分担整个业务的负载。提高系统的稳定性&#xff0c;也可以提高高可用&#xff08;备灾&#xff0c;其中一台后端服务器如果发生故障不影响整体业务&#xff09;. 负载均衡的算法 round robin 轮询 r…...

编程日记 2024/12/18 10:47:54

鸿蒙项目云捐助第十一讲鸿蒙App应用的捐助成功自定义对话框组件实现

在生活中&#xff0c;用户做了一个好事后&#xff0c;很多场合都会收到一份感谢。在捐助的行业也是一样的&#xff0c;用户捐出了一片爱心&#xff0c;就会收获一份温情。这里的温情是通过自定义对话框实现的。 一、通过自定义对话框组件实现捐款成功的信息页 这里用户捐款成…...

编程日记 2024/12/18 10:46:53

华为云联合中国信通院发布首个云计算智能化可观测性能力成熟度模型标准

2024年12月3日&#xff0c;由全球数字经济大会组委会主办&#xff0c;中国信息通信研究院&#xff08;以下简称“中国信通院”&#xff09;、中国通信企业协会承办的2024全球数字经济大会云AI计算国际合作论坛在北京成功召开。本次会议中&#xff0c;华为云联合中国信通院等单位…...

编程日记 2024/12/18 10:45:52

如何评估呼叫中心大模型呼出机器人的使用效果？

如何评估呼叫中心大模型呼出机器人的使用效果&#xff1f; 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc 评估呼叫中心大模型呼出机器人的使用效果是一个复杂而多维的过程&#xff0c;需要综合考虑多个方面&…...

编程日记 2024/12/18 10:44:51

ARM/Linux嵌入式面经（六一）：联合汽车电子

1、自我介绍 2、介绍一下 ARM与RISCV的差异 在嵌入式系统领域，ARM与RISC-V是两种重要的指令集架构（ISA），它们各自具有独特的特点和优势。以下是对两者差异的详细介绍： ARM与RISC-V的差异 开源性与专有性： ARM：ARM架构是商业化的，任何想要使用ARM指令集或相关技术的设…...

编程日记 2024/12/18 10:43:49

unity 雷达

unity 雷达 首先去商店下载TouchScript插件 导入的时候勾选Enable TUIO 然后把预制体Cursors和TouchManager拖上 最后把TuioInput这个脚本挂上 脚本上的端口号尽量不改...

编程日记 2024/12/18 10:38:43

单元测试知识总结

我们希望每段代码都是自测试的&#xff0c;每次改动之后&#xff0c;都能自动发现对现有功能的影响。 1 测试要求 在对软件单元进行动态测试之前&#xff0c;应对软件单元的源代码进行静态测试&#xff1b; 应建立测试软件单元的环境&#xff0c;如数据准备、桩模块、模拟器…...

编程日记 2024/12/18 10:34:38

Android：使用Service处理息屏后的WebSocket的服务端推送消息并传递给前端

前言 之前我们在使 RESTful 访问服务端时&#xff0c;一般都是客户端请求服务端应答的方式&#xff0c;这种通讯方式&#xff0c;对于需要持续获取数据的情形都是采用轮询的方式&#xff0c;但是这种方式对两边的性能消耗很大&#xff0c;特别是服务端的压力很大。现在当我们使…...

编程日记 2024/12/18 10:30:35

Git Bash Here 中文显示乱码的处理方法

在使用"open Git Bash Here"时&#xff0c;遇到中文显示乱码问题。 原因&#xff1a;通常是由于编码设置不正确导致的。 open Git Bash Here —>鼠标右击空白处&#xff0c;点击「选项」|或「Options」 在「文本」或 「Text」选项卡中&#xff0c;找到"local…...

编程日记 2024/12/18 10:29:33

FreeBSD安装教程

FreeBSD 是一个功能强大且可靠的开源 UNIX 操作系统&#xff0c;适合服务器和桌面环境。本文将介绍如何安装 FreeBSD&#xff0c;从系统准备到基础设置&#xff0c;为你快速上手提供帮助。 一、准备工作 1. 硬件要求 CPU&#xff1a;支持 x86 或 AMD64 架构的处理器。 内存&a…...

编程日记 2024/12/18 10:27:30

Loki 各模式简介

目录 Loki 部署模式 单片模式 简单可扩展 微服务模式 Loki 部署模式 Loki 是一个由许多微服务组成的分布式系统。它还具有独特的构建模型&#xff0c;其中所有这些微服务都存在于同一个二进制文件中。 您可以使用命令行标志配置单个二进制文件的行为-target&#xff0c;以指…...

编程日记 2024/12/18 10:25:27

MySQL八股-全局锁，表级锁，表锁，元数据锁，意向锁，行级锁，行锁，间隙锁，临键

文章目录 全局锁表级锁表锁(表级锁)元数据锁(MDL&#xff0c;Meta Data Lock&#xff0c;表级锁)元数据锁演示元数据锁兼容的情况元数据锁互相阻塞的情况 意向锁&#xff08;Intention lock&#xff0c;表级锁&#xff09;意向锁分类意向锁演示&#xff1a;意向共享锁(**IS**)与…...

编程日记 2024/12/18 10:23:23

（四）Spring Cloud Alibaba 2023.x：高效构建 Gateway 网关服务

目录 前言 准备 项目集成 pom.xml引入依赖 启动类 yml文件添加网关配置 修改消费者FeignService类 结果验证 前言 Spring cloud alibaba 体系中构建微服务&#xff0c;我们使用Spring Cloud Gateway 作为服务网关&#xff0c; Gateway是Spring 官方推出的一款基于 Web…...

编程日记 2024/12/18 10:19:19

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2026/1/15 5:17:33

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/15 4:57:50

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/11/25 4:57:19

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/15 5:04:30