网站上传教程企业员工培训课程内容
功能：鼠标对一段文本中某些文字进行划线之后，需要在当前划线文本处出现一个功能按钮显示对划线内容进行操作，比如收藏、添加样本库等功能。
一、需要了解的鼠标事件对象属性
给 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>