网站进入沙盒期,加强服务保障满足群众急需i ,沧州网站建设运营公司,中国500强企业排行榜功能#xff1a;鼠标对一段文本中某些文字进行划线之后#xff0c;需要在当前划线文本处出现一个功能按钮显示对划线内容进行操作#xff0c;比如收藏、添加样本库等功能。
一、需要了解的鼠标事件对象属性
给 dom 元素注册鼠标事件之后#xff0c;会有 event 属性#…
功能鼠标对一段文本中某些文字进行划线之后需要在当前划线文本处出现一个功能按钮显示对划线内容进行操作比如收藏、添加样本库等功能。
一、需要了解的鼠标事件对象属性
给 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 元素并指定绝对定位分别设置 topleft 属性
5、这样就实现啦大家遇到这样的需求不需要慌啦~
三、整体代码
!DOCTYPE html
html langzhheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title实现鼠标划线选中文本并进行操作/titlestyle.wrap {position: relative;left: 0;width: 800px;margin-left: 20px;height: 300px;background-color: #f99;color: #1c1717;}/style/headbodydiv classwrap onmouseuphandleMouseUp(event)生活中总有一些美好的瞬间让我们感受到温暖与幸福。清晨阳光透过窗帘洒在床上鸟儿在窗外欢快地歌唱这一刻仿佛整个世界都在呼唤新的开始。午后和朋友一起漫步在公园微风拂面花香四溢彼此的欢声笑语交织成一幅美丽的画卷。傍晚夕阳西下天边染上了绚丽的色彩静坐在阳台品一杯茶心中涌起无尽的感慨。生活的点滴正是这些简单而真实的瞬间让我们在忙碌中找到宁静在喧嚣中感受温暖。珍惜每一个当下学会用心去感受生活的美好无论是微小的快乐还是深刻的感动这些瞬间都将成为我们生命中最珍贵的记忆。让我们在平凡中发现不平凡在日常中体会生活的深意。/divscriptdocument.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
