|
JS 实现鼠标框选(页面选择)时返回对应的代码或文案内容
一、需求背景
1、项目需求
当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。
2、需求解析
虽然这需求就一句话的事,但是很显然,没那么简单...
因为鼠标框选说起来简单,就是选择的内容,但是这包含很多中情况,比如:只选择文案、选择图片、选择输入框、输入框中的内容选择、iframe、等。
简单总结,分为以下几点:
- 选择文案时
- 选择图片、svg、iframe、video、audio 等标签时
- 选择 input、select、textarea 等标签时
- 选择 input、textarea 标签内容时
- 选择类似 字符时
- 键盘全选时
- 鼠标右键选择
- 以上各模块结合时
- 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
二、技术要点
鼠标框选包含以下几点:
- debounce 防抖
- addEventListener 事件监听
- Range 对象
- Selection 对象
1、debounce
老生常谈的技术点了,这里不能用节流,因为肯定不能你鼠标选择的时候,隔一段时间返回一段内容,肯定是选择之后一起返回。
这里用 debounce 主要也是用在事件监听和事件处理上。
2、addEventListener
事件监听,因为鼠标选择,不仅仅是鼠标按下到鼠标抬起,还包括双击、右键、全选。
需要使用事件监听对事件作处理。
3、Range
Range 接口表示一个包含节点与文本节点的一部分的文档片段。
Range 是浏览器原生的对象。
3.1. 创建 Range 实例,并设置起始位置
- <body>
- <ul>
- <li>Vite</li>
- <li>Vue</li>
- <li>React</li>
- <li>VitePress</li>
- <li>NaiveUI</li>
- </ul>
- </body>
复制代码
可以看到,选择内容为第二行和第三行
3.1.1 浏览器兼容情况
3.2. Range 属性
- startContainer:起始节点。
- startOffset:起始节点偏移量。
- endContainer:结束节点。
- endOffset:结束节点偏移量。
- collapsed:范围的开始和结束是否为同一点。
- commonAncestorContainer:返回完整包含 startContainer 和 endContainer 的最深一级的节点。
3.2.1. 用我们上面创建的实例来看下 range 属性的值
3.2.2. 如果我们只选择文本内容时
只选择 li 中的 itePres
可以看出 range 属性对应的值
3.3. Range 方法
- cloneContents():复制范围内容,并将复制的内容作为 DocumentFragment 返回。
- cloneRange():创建一个具有相同起点/终点的新范围, 非引用,可以随意改变,不会影响另一方。
- collapse(toStart):如果 toStart=true 则设置 end=start,否则设置 start=end,从而折叠范围。
- compareBoundaryPoints(how, sourceRange):两个范围边界点进行比较,返回一个数字 -1、0、1。
- comparePoint(referenceNode, offset):返回-1、0、1具体取决于 是 referenceNode 在 之前、相同还是之后。
- createContextualFragment(tagString):返回一个 DocumentFragment。
- deleteContents():删除框选的内容。
- extractContents():从文档中删除范围内容,并将删除的内容作为 DocumentFragment 返回。
- getBoundingClientRect():和 dom 一样,返回 DOMRect 对象。
- getClientRects():返回可迭代的对象序列 DOMRect。
- insertNode(node):在范围的起始处将 node 插入文档。
- intersectsNode(referenceNode):判断与给定的 node 是否相交。
- selectNode(node):设置范围以选择整个 node。
- selectNodeContents(node):设置范围以选择整个 node 的内容。
- setStart(startNode, startOffset):设置起点。
- setEnd(endNode, endOffset):设置终点。
- setStartBefore(node):将起点设置在 node 前面。
- setStartAfter(node):将起点设置在 node 后面。
- setEndBefore(node):将终点设置为 node 前面。
- setEndAfter(node):将终点设置为 node 后面。
- surroundContents(node):使用 node 将所选范围内容包裹起来。
3.4. 创建 Range 的方法
3.4.1. Document.createRange
- const range = document.createRange();
复制代码 3.4.2. Selection 的 getRangeAt() 方法
- const range = window.getSelection().getRangeAt(0)
复制代码 3.4.3. caretRangeFromPoint() 方法
- if (document.caretRangeFromPoint) {
- range = document.caretRangeFromPoint(e.clientX, e.clientY);
- }
复制代码 3.4.4. Range() 构造函数
- const range = new Range()
复制代码 3.5. Range 兼容性
4、Selection
Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。
4.1. 获取文本对象
4.2. Selection 术语
4.2.1. 锚点 (anchor)
锚指的是一个选区的起始点(不同于 HTML 中的锚点链接)。当我们使用鼠标框选一个区域的时候,锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时,锚点是不会变的。
4.2.2. 焦点 (focus)
选区的焦点是该选区的终点,当你用鼠标框选一个选区的时候,焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标,焦点的位置会随着改变。
4.2.3. 范围 (range)
范围指的是文档中连续的一部分。一个范围包括整个节点,也可以包含节点的一部分,例如文本节点的一部分。用户通常下只能选择一个范围,但是有的时候用户也有可能选择多个范围。
4.2.4. 可编辑元素 (editing host)
一个用户可编辑的元素(例如一个使用 contenteditable 的 HTML 元素,或是在启用了 designMode 的 Document 的子元素)。
4.3. Selection 的属性
首先要清楚,选择的起点称为锚点(anchor),终点称为焦点(focus)。
- anchorNode:选择的起始节点。
- anchorOffset:选择开始的 anchorNode 中的偏移量。
- focusNode:选择的结束节点。
- focusOffset:选择开始处 focusNode 的偏移量。
- isCollapsed:如果未选择任何内容(空范围)或不存在,则为 true。
- rangeCount:选择中的范围数,之前说过,除 Firefox 外,其他浏览器最多为1。
- type:类型:None、Caret、Range
4.4. Selection 方法
- addRange(range): 将一个 Range 对象添加到当前选区。
- collapse(node, offset): 将选区折叠到指定的节点和偏移位置。
- collapseToEnd(): 将选区折叠到当前选区的末尾。
- collapseToStart(): 将选区折叠到当前选区的起始位置。
- containsNode(node, partlyContained): 判断选区是否包含指定的节点,可以选择是否部分包含。
- deleteFromDocument(): 从文档中删除选区内容。
- empty(): 从选区中移除所有范围(同 `removeAllRanges()``,已废弃)。
- extend(node, offset): 将选区的焦点节点扩展到指定的节点和偏移位置。
- getRangeAt(index): 返回选区中指定索引处的 Range 对象。
- removeAllRanges(): 移除所有选区中的范围。
- removeRange(range): 从选区中移除指定的 Range 对象。
- selectAllChildren(node): 选中指定节点的所有子节点。
- setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 设置选区的起始和结束节点及偏移位置。
- setPosition(node, offset):collapse 的别名
4.5. Selection 兼容性
三、项目实现
1、实现思路
- 先获取选择的内容,开发 getSelectContent 函数
- 对获取的内容进行判断,是否存在 selection 实例,没有直接返回 null
- 判断 selection 实例的 isCollapsed 属性
- 没有选中,对 selection 进行 toString().trim() 操作,判断内容
- 有内容,直接返回 text 类型
- 无内容,返回 null
- 有选中,则判断内容
- 判断选中的内容有没有节点
- 没有节点,则和没有选中一样处理,进行 toString().trim() 操作,判断内容
- 有内容,直接返回 text 类型
- 无内容,返回 null
- 有节点,进行 toString().trim() 操作,判断内容
- 没有内容,判断是否有特殊节点
- 有 'iframe', 'svg', 'img', 'audio', 'video' 节点,返回 html 类型
- 有 'input', 'textarea', 'select',判断 value 值,是否存在
- 存在:返回 html 类型
- 不存在:返回 null
- 没有特殊节点,返回 null
- 有内容,返回 html 类型
- 对鼠标 mousedown、mouseup 事件和 selectionchange、contextmenu、dblclick 事件进行监听,触发 getSelectContent 函数
- 在需要的地方进行 debounce 防抖处理
2、简易流程图
2、Debounce 方法实现
2.1. JS
- function debounce (fn, time = 500) {
- let timeout = null; // 创建一个标记用来存放定时器的返回值
- return function () {
- clearTimeout(timeout) // 每当触发时,把前一个 定时器 clear 掉
- timeout = setTimeout(() => { // 创建一个新的 定时器,并赋值给 timeout
- fn.apply(this, arguments)
- }, time)
- }
- }
复制代码 2.2. TS
- /**
- * debounce 函数类型
- */
- type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
- /**
- * debounce 防抖函数
- * @param {Function} func 函数
- * @param {number} wait 等待时间
- * @param {false} immediate 是否立即执行
- * @returns {DebouncedFunction}
- */
- function debounce<F extends (...args: any[]) => any>(
- func: F,
- wait = 500,
- immediate = false
- ): DebouncedFunction<F> {
- let timeout: ReturnType<typeof setTimeout> | null
- return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
- // eslint-disable-next-line @typescript-eslint/no-this-alias
- const context = this
- const later = function () {
- timeout = null
- if (!immediate) {
- func.apply(context, args)
- }
- }
- const callNow = immediate && !timeout
- if (timeout) {
- clearTimeout(timeout)
- }
- timeout = setTimeout(later, wait)
- if (callNow) {
- func.apply(context, args)
- }
- }
- }
复制代码 3、获取选择的文本/html 元素
3.1. 获取文本/html 元素
- nterface IGetSelectContentProps {
- type: 'html' | 'text'
- content: string
- }
- /**
- * 获取选择的内容
- * @returns {null | IGetSelectContentProps} 返回选择的内容
- */
- const getSelectContent = (): null | IGetSelectContentProps => {
- const selection = window.getSelection()
- if (selection) {
- // 1. 是焦点在 input 输入框
- // 2. 没有选中
- // 3. 选择的是输入框
- if (selection.isCollapsed) {
- return selection.toString().trim().length
- ? {
- type: 'text',
- content: selection.toString().trim()
- }
- : null
- }
- // 获取选择范围
- const range = selection.getRangeAt(0)
- // 获取选择内容
- const rangeClone = range.cloneContents()
- // 判断选择内容里面有没有节点
- if (rangeClone.childElementCount > 0) {
- // 创建 div 标签
- const container = document.createElement('div')
- // div 标签 append 复制节点
- container.appendChild(rangeClone)
- // 如果复制的内容长度为 0
- if (!selection.toString().trim().length) {
- // 判断是否有选择特殊节点
- const isSpNode = hasSpNode(container)
- return isSpNode
- ? {
- type: 'html',
- content: container.innerHTML
- }
- : null
- }
- return {
- type: 'html',
- content: container.innerHTML
- }
- } else {
- return selection.toString().trim().length
- ? {
- type: 'text',
- content: selection.toString().trim()
- }
- : null
- }
- } else {
- return null
- }
- }
- /**
- * 判断是否包含特殊元素
- * @param {Element} parent 父元素
- * @returns {boolean} 是否包含特殊元素
- */
- const hasSpNode = (parent: Element): boolean => {
- const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
- const inpList = ['input', 'textarea', 'select']
- return Array.from(parent.children).some((node) => {
- if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
- if (
- inpList.includes(node.nodeName.toLocaleLowerCase()) &&
- (node as HTMLInputElement).value.trim().length
- )
- return true
- if (node.children) {
- return hasSpNode(node)
- }
- return false
- })
- }
复制代码 3.2. 只需要文本
- /**
- * 获取框选的文案内容
- * @returns {string} 返回框选的内容
- */
- const getSelectTextContent = (): string => {
- const selection = window.getSelection()
- return selection?.toString().trim() || ''
- }
复制代码 4、添加事件监听
- // 是否时鼠标点击动作
- let selectionchangeMouseTrack: boolean = false
- const selectionChangeFun = debounce(() => {
- const selectContent = getSelectContent()
- console.log('selectContent', selectContent)
- // todo... 处理上报
- selectionchangeMouseTrack = false
- })
- // 添加 mousedown 监听事件
- document.addEventListener('mousedown', () => {
- selectionchangeMouseTrack = true
- })
- // 添加 mouseup 监听事件
- document.addEventListener(
- 'mouseup',
- debounce(() => {
- selectionChangeFun()
- }, 100)
- )
- // 添加 selectionchange 监听事件
- document.addEventListener(
- 'selectionchange',
- debounce(() => {
- if (selectionchangeMouseTrack) return
- selectionChangeFun()
- })
- )
- // 添加 dblclick 监听事件
- document.addEventListener('dblclick', () => {
- selectionChangeFun()
- })
- // 添加 contextmenu 监听事件
- document.addEventListener(
- 'contextmenu',
- debounce(() => {
- selectionChangeFun()
- })
- )
复制代码 也可以进行封装- /**
- * addEventlistener function 类型
- */
- export interface IEventHandlerProps {
- [eventName: string]: EventListenerOrEventListenerObject
- }
- let selectionchangeMouseTrack: boolean = false
- const eventHandlers: IEventHandlerProps = {
- // 鼠标 down 事件
- mousedown: () => {
- selectionchangeMouseTrack = true
- },
- // 鼠标 up 事件
- mouseup: debounce(() => selectionChangeFun(), 100),
- // 选择事件
- selectionchange: debounce(() => {
- if (selectionchangeMouseTrack) return
- selectionChangeFun()
- }),
- // 双击事件
- dblclick: () => selectionChangeFun(),
- // 右键事件
- contextmenu: debounce(() => selectionChangeFun())
- }
- Object.keys(eventHandlers).forEach((event) => {
- document.addEventListener(event, eventHandlers[event])
- })
复制代码 5、返回内容
5.1. 纯文本内容
5.2. html 格式
6. 完整 JS 代码
- function debounce (fn, time = 500) {
- let timeout = null; // 创建一个标记用来存放定时器的返回值
- return function () {
- clearTimeout(timeout) // 每当触发时,把前一个 定时器 clear 掉
- timeout = setTimeout(() => { // 创建一个新的 定时器,并赋值给 timeout
- fn.apply(this, arguments)
- }, time)
- }
- }let selectionchangeMouseTrack = falsedocument.addEventListener('mousedown', (e) => { selectionchangeMouseTrack = true console.log('mousedown', e)})document.addEventListener('mouseup', debounce((e) => { console.log('mouseup', e) selectionChangeFun()}, 100))document.addEventListener('selectionchange', debounce((e) => { console.log('selectionchange', e) if (selectionchangeMouseTrack) return selectionChangeFun()}))document.addEventListener('dblclick', (e) => { console.log('dblclick', e) selectionChangeFun()})document.addEventListener('contextmenu',debounce(() => { selectionChangeFun()}))const selectionChangeFun = debounce(() => { const selectContent = getSelectContent() selectionchangeMouseTrack = false console.log('selectContent', selectContent)})const getSelectContent = () => { const selection = window.getSelection(); if (selection) { // 1. 是焦点在 input 输入框 // 2. 没有选中 // 3. 选择的是输入框 if (selection.isCollapsed) { return selection.toString().trim().length ? { type: 'text', content: selection.toString().trim() } : null } // 获取选择范围 const range = selection.getRangeAt(0); // 获取选择内容 const rangeClone = range.cloneContents() // 判断选择内容里面有没有节点 if (rangeClone.childElementCount > 0) { const container = document.createElement('div'); container.appendChild(rangeClone); if (!selection.toString().trim().length) { const hasSpNode = getSpNode(container) return hasSpNode ? { type: 'html', content: container.innerHTML } : null } return { type: 'html', content: container.innerHTML } } else { return selection.toString().trim().length ? { type: 'text', content: selection.toString().trim() } : null } } else { return null }}const getSpNode = (parent) => { const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video'] const inpList = ['input', 'textarea', 'select'] return Array.from(parent.children).some((node) => { if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true if (node.children) { return getSpNode(node) } return false })}
复制代码 7. 线上预览
四、总结
- 鼠标框选上报能监控用户在页面的行为,能为后续的数据分析等提供便利
- 基于 JS 中的 Selection 和 Range 实现的,使用原生 JS
- 涉及到的操作比较多,包含键盘、鼠标右键、全选等
- 能对框选的内容进行分类,区别 html 和 text,更方便的看出用户选择了哪些内容
引用
来源:https://www.cnblogs.com/risheng/p/18207069
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作! |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
|