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

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

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

给 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64400.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024安装hexo和next并部署到github和服务器最新教程

碎碎念 本来打算写点算法题上文所说的题目&#xff0c;结果被其他事情吸引了注意力。其实我之前也有过其他博客网站&#xff0c;但因为长期不维护&#xff0c;导致数据丢失其实是我懒得备份。这个博客现在部署在GitHub Pages上&#xff0c;github不倒&#xff0c;网站不灭&…

Chinese-Clip实现以文搜图和以图搜图

本文不生产技术&#xff0c;只做技术的搬运工&#xff01; 前言 目前网上能够找到的资料有限&#xff0c;要么收费&#xff0c;要么配置复杂&#xff0c;作者主打一个一毛不拔&#xff0c;决定自己动手实现一个&#xff0c;功能清单受启发于Nidia AI lab实验室的nanodb项目&am…

Abaqus混凝土梁三点弯曲开裂模拟基于随机多边形骨料及界面过渡区模型

在细观混凝土开裂研究中&#xff0c;仿真可直观揭示混凝土中多相材料的破坏特征及微观裂缝的发展规律。本案例建立包含随机多边形粗骨料、界面过渡区&#xff08;ITZ&#xff09;及水泥砂浆在内的细观混凝土梁二维模型&#xff0c;对混凝土梁在三点弯曲工况下进行有限元模拟&am…

Qt之修改窗口标题、图标以及自定义标题栏(九)

Qt开发 系列文章 - titles-icons-titlebars&#xff08;九&#xff09; 目录 前言 一、修改标题 二、添加图标 三、更换标题栏 1.效果演示 2.创建标题栏类 3.定义相关函数 4.使用标题栏类 总结 前言 在我们利用Qt设计软件时&#xff0c;经常需要修改窗口标题、更改软…

渗透测试之js利用

引言 在渗透测试中&#xff0c;js利用是一个非常重要的部分&#xff0c;作为一个网络安全人员&#xff0c;我也是经常利用到这一模块&#xff0c;首先&#xff0c;js是什么呢 什么是js JavaScript(简称js)&#xff0c;javascript和java虽然名字相似&#xff0c;但两个东西却…

请确保 $(OutDir)、$(TargetName) 和 $(TargetExt) 属性值与 %(Link.OutputFile) 中指定的值匹配

vs版本升级时&#xff0c;编译时会出现上述问题&#xff0c;如原来在2017下编译的程序&#xff0c;后来改用2019&#xff0c;出现上述问题。需要在解决方案-通用属性-调试源文件下变更相应设置。

Airbus结构数字样机理念及实践(转)

关注作者 1、数字样机的背景 早期的设计文档通过二维工程图来描述&#xff0c;对工程师来说&#xff0c;绘制工程图足够表达设计思想&#xff0c;工程图成为了标准的“工程师语言”。但是外围的用户通常通过透视图来表达设计意图&#xff0c;不得不产生了大量针对不同教育背景…

ik分词器了解 和 通过zip安装包的方式 将ik分词器安装到elasticsearch中

目录 1. ik分词器的作用&#xff08;效果&#xff09; &#xff08;1&#xff09;标准分析器效果 &#xff08;2&#xff09;ik_smart分词 &#xff08;3&#xff09;ik_max_word分词 2. 首先根据自己的elasticsearch的版本下载对应的ik分词器版本 3. 将下载好的ik分词器…

【人工智能】网络安全技术及应用

文章目录 前言一、网络安全概念1、你是否了解以下网络安全事件&#xff1f;2、什么是网络安全&#xff1f;3、网络安全的核心要素4、网络安全、信息安全、数据安全三者的区别5、网络安全的重要性6、网络安全-法律法规7、网络安全-等级保护 二、常见的网络安全威胁和攻击1、网络…

计算机屏幕坐标系简介

计算机屏幕坐标系简介 计算机屏幕坐标系是用于描述计算机显示屏上点的位置的系统。它在图形编程、游戏开发、用户界面设计等多个领域中至关重要。因此&#xff0c;需要理解掌握。坐标系通常由两个维度&#xff08;二维坐标系&#xff0c;平面坐标系&#xff09;或三个维度&…

java 通过jdbc连接sql2000方法

1、java通过jdbc连接sql2000 需要到三个jar包&#xff1a;msbase.jar mssqlserver.jar msutil.jar 下载地址&#xff1a;https://download.csdn.net/download/sunfor/90145580 2、将三个jar包解压到程序中的LIB下&#xff1a; 导入方法&#xff1a; ①在当前目录下&#xff…

车牌识别之二:车牌OCR识别(包含全部免费的数据集、源码和模型下载)

重要的事说在前面 数据集&#xff1a; https://pan.baidu.com/s/1YayAeqgdqZ0u2vSovd0Z4w 提取码&#xff1a;8888 如果作者误删的话&#xff0c;参考这里下载的CCPD2019.tar.xz和CCPD2020.zip获取。 背景 上一节车牌识别之一&#xff1a;车牌检测(包含全部免费的数据集、源…

单北斗+鸿蒙系统+国产芯片,遨游防爆手机自主可控“三保险”

在当今全球科技竞争日益激烈的背景下&#xff0c;技术自主可控的重要性愈发凸显。它不仅关乎国家安全&#xff0c;更是推动产业升级和经济发展的关键。特别是在一些特殊领域&#xff0c;如防爆通信&#xff0c;自主可控的技术更是不可或缺。遨游通讯推出了一款融合了单北斗、鸿…

【zlm】 webrtc源码讲解三(总结)

目录 setsdp onwrite ​编辑 play 参考 setsdp onwrite play 参考 【zlm】 webrtc源码讲解_zlm webrtc-CSDN博客 【zlm】 webrtc源码讲解&#xff08;二&#xff09;_webrtc 源码-CSDN博客

打造专业的电子商务维护页面:如何确保用户信任与业务连续性

在电子商务网站的运营过程中&#xff0c;维护是不可避免的一部分。然而&#xff0c;网站的短暂下线如果处理不当&#xff0c;可能会导致用户流失和销售额的下降。为了在维护期间依然保持客户的信任与业务的连续性&#xff0c;创建一个专业的维护页面至关重要。本文将为您详细介…

【python因果库实战5】使用银行营销数据集研究营销决策的效果5

目录 接触次数的效应 重新定义治疗变量和潜在混杂因素 更深入地审视干预情景 逆概率加权 标准化 总结及与非因果分析的比较 接触次数的效应 我们现在转而研究当前营销活动中接触次数的数量&#xff08;campaign&#xff09;对积极结果发生率的影响。具体来说&#xff0c;…

单步调试Android Framework——App冷启动

纸上得来终觉浅&#xff0c;绝知此事要躬行。 —— [宋]陆游 基于aosp_cf_x86_64_phone-trunk_staging-eng &#xff0c; 下面是具体断点位置。 第一部分&#xff0c;桌面launcher进程 com.android.launcher3.touch.ItemClickHandler onClickonClickAppShortcutstartAppShor…

【5G】5G的主要架构选项

最初&#xff0c;在3GPP讨论中考虑了所有可能的聚合和核心网络组合&#xff0c;共有八个架构选项。以下重点介绍option2、3、4和7。 1. 独立组网 (Standalone, SA) 架构选项 2 &#xff1a;Standalone architecture with 5G-core 特点&#xff1a; 5G核心网&#xff08;5GC, …

MySQL数据库备份,恢复

备份策略不同&#xff0c;恢复方式也不同。 在进行数据备份的时候&#xff0c;能使用冷备份就使用冷备份&#xff0c;安全可靠&#xff0c; 但是冷备份自己的缺点是【每一个数据库都对应着一个前端的业务】此时前端业务停止可能带来经济损失。 一.备份类型 根据服务是否在线…

OpenCV 学习记录:首篇

最近在学习机器视觉&#xff0c;希望能通过记录博客的形式来鞭策自己坚持学完&#xff0c;同时也把重要的知识点记录下来供参考学习。 1. OpenCV 介绍与模块组成 什么是 OpenCV&#xff1f; OpenCV (Open Source Computer Vision Library) 是一个开源的计算机视觉和机器学习软…