JavaScript 鼠標(biāo)拖拽

易拖拽

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft; //拖拽距離
disY=oEvent.clientY-oDiv.offsetTop; //拖拽距離

oDiv.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

oDiv.onmouseup=function ()
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序問(wèn)題:鼠標(biāo)拖拽過(guò)快,鼠標(biāo)指針與拖拽div對(duì)象脫離

解決方法:直接給document加事件(因?yàn)閐iv對(duì)象范圍太小,鼠標(biāo)移動(dòng)就與拖拽div對(duì)象脫離)

將oDiv改成document對(duì)象

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序問(wèn)題: FF下，空Div拖拽Bug(殘影)

解決方法: 阻止默認(rèn)事件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false; //阻止默認(rèn)事件(拖動(dòng)殘影)
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

防止拖出頁(yè)面

html中，我們經(jīng)常會(huì)用到table布局；有時(shí)候需要實(shí)現(xiàn)指定單元格，當(dāng)鼠標(biāo)移動(dòng)到上面的時(shí)候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

html的文件結(jié)構(gòu)大家都是知道的了，總體分為head和body部分

我們要實(shí)現(xiàn)變色，在head部分實(shí)現(xiàn)格式

<style>

.tablex {border-collapse: collapse;}

.tablex tr {}

.tablex tr td {text-align:center; line-height:30px;}

.tablex tr td:hover { background-color:#f00; color:#fff;}

</style>

然后在body部分，使用table時(shí)候，注明class="tablex".這樣的話(huà)，就實(shí)現(xiàn)了我們所說(shuō)的效果了。

附上完整代碼：

<html>

<head>

<title>測(cè)試鼠標(biāo)移到到表格單元格背景顏色改變的</title>

<style>

.table1 {border-collapse: collapse;}

.table1 tr {}

.table1 tr td {text-align:center; line-height:30px;}

.table1 tr td:hover { background-color:#006030; color:#006030;}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

在任何一個(gè)瀏覽器中運(yùn)行，效果如下

南大盛聯(lián)20年來(lái)一直致力于高端IT培訓(xùn)--打造高級(jí)軟件人才實(shí)戰(zhàn)培訓(xùn)專(zhuān)家，學(xué)生對(duì)我們的認(rèn)可是我們一直前進(jìn)的動(dòng)力；項(xiàng)目團(tuán)隊(duì)全球招聘，特聘來(lái)自海外的老師進(jìn)行任教，采用100%商業(yè)項(xiàng)目進(jìn)行實(shí)戰(zhàn)培訓(xùn)，線(xiàn)上線(xiàn)下同步進(jìn)行。

課程全部緊隨市場(chǎng)需求進(jìn)行設(shè)計(jì)，并且動(dòng)態(tài)進(jìn)行調(diào)整；7天免費(fèi)試聽(tīng)，0首付開(kāi)始學(xué)習(xí)，學(xué)完后進(jìn)行100%推薦就業(yè)，不滿(mǎn)意工作崗位2次推薦。

選定一個(gè)平臺(tái)，認(rèn)識(shí)一群志同道合的朋友，你的未來(lái)人生路必定不一樣。

目前已經(jīng)開(kāi)設(shè)下面這些培訓(xùn)項(xiàng)目

Java培訓(xùn)

安卓培訓(xùn)

JavaWeb培訓(xùn)

Linux培訓(xùn)

云服務(wù)器布置培訓(xùn)

HTML5培訓(xùn)

SEO培訓(xùn)

視頻剪輯培訓(xùn)

UI培訓(xùn)

歡迎您們分享給自己愿意分享的朋友，大家一起來(lái)進(jìn)步；相互轉(zhuǎn)告，咨詢(xún)，學(xué)習(xí)。

南大盛聯(lián)培訓(xùn)理念：我懂，我也能讓你懂。

S 鼠標(biāo)框選（頁(yè)面選擇）時(shí)返回對(duì)應(yīng)的 HTML 或文案內(nèi)容

一、需求背景

1、項(xiàng)目需求

當(dāng)用戶(hù)進(jìn)行鼠標(biāo)框選選擇了頁(yè)面上的內(nèi)容時(shí)，把選擇的內(nèi)容進(jìn)行上報(bào)。

2、需求解析

雖然這需求就一句話(huà)的事，但是很顯然，沒(méi)那么簡(jiǎn)單...

因?yàn)槭髽?biāo)框選說(shuō)起來(lái)簡(jiǎn)單，就是選擇的內(nèi)容，但是這包含很多中情況，比如：只選擇文案、選擇圖片、選擇輸入框、輸入框中的內(nèi)容選擇、iframe、等。

簡(jiǎn)單總結(jié)，分為以下幾點(diǎn)：

選擇文案時(shí)
選擇圖片、svg、iframe、video、audio 等標(biāo)簽時(shí)
選擇 input、select、textarea 等標(biāo)簽時(shí)
選擇 input、textarea 標(biāo)簽內(nèi)容時(shí)
選擇類(lèi)似字符時(shí)
鍵盤(pán)全選時(shí)
鼠標(biāo)右鍵選擇
以上各模塊結(jié)合時(shí)
當(dāng)包含標(biāo)簽的時(shí)候，返回 html 結(jié)構(gòu)，只有文本時(shí)返回文本內(nèi)容

二、技術(shù)要點(diǎn)

鼠標(biāo)框選包含以下幾點(diǎn)：

debounce 防抖
addEventListener 事件監(jiān)聽(tīng)
Range 對(duì)象
Selection 對(duì)象

1、debounce

老生常談的技術(shù)點(diǎn)了，這里不能用節(jié)流，因?yàn)榭隙ú荒苣闶髽?biāo)選擇的時(shí)候，隔一段時(shí)間返回一段內(nèi)容，肯定是選擇之后一起返回。

這里用 debounce 主要也是用在事件監(jiān)聽(tīng)和事件處理上。

【debounce 掘金】
【debounce CSDN】

2、addEventListener

事件監(jiān)聽(tīng)，因?yàn)槭髽?biāo)選擇，不僅僅是鼠標(biāo)按下到鼠標(biāo)抬起，還包括雙擊、右鍵、全選。

需要使用事件監(jiān)聽(tīng)對(duì)事件作處理。

【addEventListener MDN】

3、Range

Range 接口表示一個(gè)包含節(jié)點(diǎn)與文本節(jié)點(diǎn)的一部分的文檔片段。

Range 是瀏覽器原生的對(duì)象。

3.1. 創(chuàng)建 Range 實(shí)例，并設(shè)置起始位置

<body>
  <ul>
    <li>Vite</li>
    <li>Vue</li>
    <li>React</li>
    <li>VitePress</li>
    <li>NaiveUI</li>
  </ul>
</body>
<script>
  // 創(chuàng)建 Range 對(duì)象
  const range = new Range()
  const liDoms = document.querySelectorAll("li");
  // Range 起始位置在 li 2
  range.setStartBefore(liDoms[1]);
  // Range 結(jié)束位置在 li 3
  range.setEndAfter(liDoms[2]);
  // 獲取 selection 對(duì)象
  const selection = window.getSelection();
  // 添加光標(biāo)選擇的范圍
  selection.addRange(range);
</script>

可以看到，選擇內(nèi)容為第二行和第三行

3.1.1 瀏覽器兼容情況

3.2. Range 屬性

startContainer：起始節(jié)點(diǎn)。
startOffset：起始節(jié)點(diǎn)偏移量。
endContainer：結(jié)束節(jié)點(diǎn)。
endOffset：結(jié)束節(jié)點(diǎn)偏移量。
collapsed：范圍的開(kāi)始和結(jié)束是否為同一點(diǎn)。
commonAncestorContainer：返回完整包含 startContainer 和 endContainer 的最深一級(jí)的節(jié)點(diǎn)。

3.2.1. 用我們上面創(chuàng)建的實(shí)例來(lái)看下 range 屬性的值

3.2.2. 如果我們只選擇文本內(nèi)容時(shí)

只選擇 li 中的 itePres

可以看出 range 屬性對(duì)應(yīng)的值

3.3. Range 方法

cloneContents()：復(fù)制范圍內(nèi)容，并將復(fù)制的內(nèi)容作為 DocumentFragment 返回。
cloneRange()：創(chuàng)建一個(gè)具有相同起點(diǎn)/終點(diǎn)的新范圍，非引用，可以隨意改變，不會(huì)影響另一方。
collapse(toStart)：如果 toStart=true 則設(shè)置 end=start，否則設(shè)置 start=end，從而折疊范圍。
compareBoundaryPoints(how, sourceRange)：兩個(gè)范圍邊界點(diǎn)進(jìn)行比較，返回一個(gè)數(shù)字 -1、0、1。
comparePoint(referenceNode, offset)：返回-1、0、1具體取決于是 referenceNode 在之前、相同還是之后。
createContextualFragment(tagString)：返回一個(gè) DocumentFragment。
deleteContents()：刪除框選的內(nèi)容。
extractContents()：從文檔中刪除范圍內(nèi)容，并將刪除的內(nèi)容作為 DocumentFragment 返回。
getBoundingClientRect()：和 dom 一樣，返回 DOMRect 對(duì)象。
getClientRects()：返回可迭代的對(duì)象序列 DOMRect。
insertNode(node)：在范圍的起始處將 node 插入文檔。
intersectsNode(referenceNode)：判斷與給定的 node 是否相交。
selectNode(node)：設(shè)置范圍以選擇整個(gè) node。
selectNodeContents(node)：設(shè)置范圍以選擇整個(gè) node 的內(nèi)容。
setStart(startNode, startOffset)：設(shè)置起點(diǎn)。
setEnd(endNode, endOffset)：設(shè)置終點(diǎn)。
setStartBefore(node)：將起點(diǎn)設(shè)置在 node 前面。
setStartAfter(node)：將起點(diǎn)設(shè)置在 node 后面。
setEndBefore(node)：將終點(diǎn)設(shè)置為 node 前面。
setEndAfter(node)：將終點(diǎn)設(shè)置為 node 后面。
surroundContents(node)：使用 node 將所選范圍內(nèi)容包裹起來(lái)。

3.4. 創(chuàng)建 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() 構(gòu)造函數(shù)

const range = new Range()

3.5. Range 兼容性

4、Selection

Selection 對(duì)象表示用戶(hù)選擇的文本范圍或插入符號(hào)的當(dāng)前位置。它代表頁(yè)面中的文本選區(qū)，可能橫跨多個(gè)元素。

4.1. 獲取文本對(duì)象

window.getSelection()

4.2. Selection 術(shù)語(yǔ)

4.2.1. 錨點(diǎn) (anchor)

錨指的是一個(gè)選區(qū)的起始點(diǎn)（不同于 HTML 中的錨點(diǎn)鏈接）。當(dāng)我們使用鼠標(biāo)框選一個(gè)區(qū)域的時(shí)候，錨點(diǎn)就是我們鼠標(biāo)按下瞬間的那個(gè)點(diǎn)。在用戶(hù)拖動(dòng)鼠標(biāo)時(shí)，錨點(diǎn)是不會(huì)變的。

4.2.2. 焦點(diǎn) (focus)

選區(qū)的焦點(diǎn)是該選區(qū)的終點(diǎn)，當(dāng)你用鼠標(biāo)框選一個(gè)選區(qū)的時(shí)候，焦點(diǎn)是你的鼠標(biāo)松開(kāi)瞬間所記錄的那個(gè)點(diǎn)。隨著用戶(hù)拖動(dòng)鼠標(biāo)，焦點(diǎn)的位置會(huì)隨著改變。

4.2.3. 范圍 (range)

范圍指的是文檔中連續(xù)的一部分。一個(gè)范圍包括整個(gè)節(jié)點(diǎn)，也可以包含節(jié)點(diǎn)的一部分，例如文本節(jié)點(diǎn)的一部分。用戶(hù)通常下只能選擇一個(gè)范圍，但是有的時(shí)候用戶(hù)也有可能選擇多個(gè)范圍。

4.2.4. 可編輯元素 (editing host)

一個(gè)用戶(hù)可編輯的元素（例如一個(gè)使用 contenteditable 的 HTML 元素，或是在啟用了 designMode 的 Document 的子元素）。

4.3. Selection 的屬性

首先要清楚，選擇的起點(diǎn)稱(chēng)為錨點(diǎn)(anchor)，終點(diǎn)稱(chēng)為焦點(diǎn)(focus)。

anchorNode：選擇的起始節(jié)點(diǎn)。
anchorOffset：選擇開(kāi)始的 anchorNode 中的偏移量。
focusNode：選擇的結(jié)束節(jié)點(diǎn)。
focusOffset：選擇開(kāi)始處 focusNode 的偏移量。
isCollapsed：如果未選擇任何內(nèi)容（空范圍）或不存在，則為 true。
rangeCount：選擇中的范圍數(shù)，之前說(shuō)過(guò)，除 Firefox 外，其他瀏覽器最多為1。
type：類(lèi)型：None、Caret、Range

4.4. Selection 方法

addRange(range): 將一個(gè) Range 對(duì)象添加到當(dāng)前選區(qū)。
collapse(node, offset): 將選區(qū)折疊到指定的節(jié)點(diǎn)和偏移位置。
collapseToEnd(): 將選區(qū)折疊到當(dāng)前選區(qū)的末尾。
collapseToStart(): 將選區(qū)折疊到當(dāng)前選區(qū)的起始位置。
containsNode(node, partlyContained): 判斷選區(qū)是否包含指定的節(jié)點(diǎn)，可以選擇是否部分包含。
deleteFromDocument(): 從文檔中刪除選區(qū)內(nèi)容。
empty(): 從選區(qū)中移除所有范圍（同 `removeAllRanges()``，已廢棄）。
extend(node, offset): 將選區(qū)的焦點(diǎn)節(jié)點(diǎn)擴(kuò)展到指定的節(jié)點(diǎn)和偏移位置。
getRangeAt(index): 返回選區(qū)中指定索引處的 Range 對(duì)象。
removeAllRanges(): 移除所有選區(qū)中的范圍。
removeRange(range): 從選區(qū)中移除指定的 Range 對(duì)象。
selectAllChildren(node): 選中指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)。
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 設(shè)置選區(qū)的起始和結(jié)束節(jié)點(diǎn)及偏移位置。
setPosition(node, offset)：collapse 的別名

4.5. Selection 兼容性

三、項(xiàng)目實(shí)現(xiàn)

1、實(shí)現(xiàn)思路

先獲取選擇的內(nèi)容，開(kāi)發(fā) getSelectContent 函數(shù)
對(duì)獲取的內(nèi)容進(jìn)行判斷，是否存在 selection 實(shí)例，沒(méi)有直接返回 null
判斷 selection 實(shí)例的 isCollapsed 屬性沒(méi)有選中，對(duì) selection 進(jìn)行 toString().trim() 操作，判斷內(nèi)容有內(nèi)容，直接返回 text 類(lèi)型無(wú)內(nèi)容，返回 null 有選中，則判斷內(nèi)容
判斷選中的內(nèi)容有沒(méi)有節(jié)點(diǎn) 沒(méi)有節(jié)點(diǎn)，則和沒(méi)有選中一樣處理，進(jìn)行 toString().trim() 操作，判斷內(nèi)容有內(nèi)容，直接返回 text 類(lèi)型無(wú)內(nèi)容，返回 null 有節(jié)點(diǎn)，進(jìn)行 toString().trim() 操作，判斷內(nèi)容沒(méi)有內(nèi)容，判斷是否有特殊節(jié)點(diǎn) 有 'iframe', 'svg', 'img', 'audio', 'video' 節(jié)點(diǎn)，返回 html 類(lèi)型有 'input', 'textarea', 'select'，判斷 value 值，是否存在存在：返回 html 類(lèi)型不存在：返回 null 沒(méi)有特殊節(jié)點(diǎn)，返回 null 有內(nèi)容，返回 html 類(lèi)型
對(duì)鼠標(biāo) mousedown、mouseup 事件和 selectionchange、contextmenu、dblclick 事件進(jìn)行監(jiān)聽(tīng)，觸發(fā) getSelectContent 函數(shù)
在需要的地方進(jìn)行 debounce 防抖處理

2、簡(jiǎn)易流程圖

2、Debounce 方法實(shí)現(xiàn)

2.1. JS

function debounce (fn, time = 500) {
  let timeout = null; // 創(chuàng)建一個(gè)標(biāo)記用來(lái)存放定時(shí)器的返回值
  return function () {
    clearTimeout(timeout) // 每當(dāng)觸發(fā)時(shí)，把前一個(gè) 定時(shí)器 clear 掉
    timeout = setTimeout(() => { // 創(chuàng)建一個(gè)新的 定時(shí)器，并賦值給 timeout
      fn.apply(this, arguments)
    }, time)
  }
}

2.2. TS

/**
 * debounce 函數(shù)類(lèi)型
 */
type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
/**
 * debounce 防抖函數(shù)
 * @param {Function} func 函數(shù)
 * @param {number} wait 等待時(shí)間
 * @param {false} immediate 是否立即執(zhí)行
 * @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
}
/**
 * 獲取選擇的內(nèi)容
 * @returns {null | IGetSelectContentProps} 返回選擇的內(nèi)容
 */
const getSelectContent = (): null | IGetSelectContentProps => {
  const selection = window.getSelection()
  if (selection) {
    // 1. 是焦點(diǎn)在 input 輸入框
    // 2. 沒(méi)有選中
    // 3. 選擇的是輸入框
    if (selection.isCollapsed) {
      return selection.toString().trim().length
        ? {
            type: 'text',
            content: selection.toString().trim()
          }
        : null
    }
    // 獲取選擇范圍
    const range = selection.getRangeAt(0)
    // 獲取選擇內(nèi)容
    const rangeClone = range.cloneContents()
    // 判斷選擇內(nèi)容里面有沒(méi)有節(jié)點(diǎn)
    if (rangeClone.childElementCount > 0) {
      // 創(chuàng)建 div 標(biāo)簽
      const container = document.createElement('div')
      // div 標(biāo)簽 append 復(fù)制節(jié)點(diǎn)
      container.appendChild(rangeClone)
      // 如果復(fù)制的內(nèi)容長(zhǎng)度為 0
      if (!selection.toString().trim().length) {
        // 判斷是否有選擇特殊節(jié)點(diǎn)
        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. 只需要文本

/**
 * 獲取框選的文案內(nèi)容
 * @returns {string} 返回框選的內(nèi)容
 */
const getSelectTextContent = (): string => {
  const selection = window.getSelection()
  return selection?.toString().trim() || ''
}

4、添加事件監(jiān)聽(tīng)

// 是否時(shí)鼠標(biāo)點(diǎn)擊動(dòng)作
let selectionchangeMouseTrack: boolean = false
const selectionChangeFun = debounce(() => {
  const selectContent = getSelectContent()
  console.log('selectContent', selectContent)
  // todo... 處理上報(bào)
  selectionchangeMouseTrack = false
})
// 添加 mousedown 監(jiān)聽(tīng)事件
document.addEventListener('mousedown', () => {
  selectionchangeMouseTrack = true
})
// 添加 mouseup 監(jiān)聽(tīng)事件
document.addEventListener(
  'mouseup',
  debounce(() => {
    selectionChangeFun()
  }, 100)
)
// 添加 selectionchange 監(jiān)聽(tīng)事件
document.addEventListener(
  'selectionchange',
  debounce(() => {
    if (selectionchangeMouseTrack) return
    selectionChangeFun()
  })
)
// 添加 dblclick 監(jiān)聽(tīng)事件
document.addEventListener('dblclick', () => {
  selectionChangeFun()
})
// 添加 contextmenu 監(jiān)聽(tīng)事件
document.addEventListener(
  'contextmenu',
  debounce(() => {
    selectionChangeFun()
  })
)

也可以進(jìn)行封裝

/**
 * addEventlistener function 類(lèi)型
 */
export interface IEventHandlerProps {
  [eventName: string]: EventListenerOrEventListenerObject
}

let selectionchangeMouseTrack: boolean = false
const eventHandlers: IEventHandlerProps = {
  // 鼠標(biāo) down 事件
  mousedown: () => {
    selectionchangeMouseTrack = true
  },
  // 鼠標(biāo) 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、返回內(nèi)容

5.1. 純文本內(nèi)容

5.2. html 格式

6. 完整 JS 代碼

function debounce (fn, time = 500) {
  let timeout = null; // 創(chuàng)建一個(gè)標(biāo)記用來(lái)存放定時(shí)器的返回值
  return function () {
    clearTimeout(timeout) // 每當(dāng)觸發(fā)時(shí)，把前一個(gè) 定時(shí)器 clear 掉
    timeout = setTimeout(() => { // 創(chuàng)建一個(gè)新的 定時(shí)器，并賦值給 timeout
      fn.apply(this, arguments)
    }, time)
  }
}

let selectionchangeMouseTrack = false
document.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. 是焦點(diǎn)在 input 輸入框
    // 2. 沒(méi)有選中
    // 3. 選擇的是輸入框
    if (selection.isCollapsed) {
      return selection.toString().trim().length ? {
        type: 'text',
        content: selection.toString().trim()
      } : null
    }
    // 獲取選擇范圍
    const range = selection.getRangeAt(0);
    // 獲取選擇內(nèi)容
    const rangeClone = range.cloneContents()
    // 判斷選擇內(nèi)容里面有沒(méi)有節(jié)點(diǎn)
    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
  })
}

四、總結(jié)

鼠標(biāo)框選上報(bào)能監(jiān)控用戶(hù)在頁(yè)面的行為，能為后續(xù)的數(shù)據(jù)分析等提供便利
基于 JS 中的 Selection 和 Range 實(shí)現(xiàn)的，使用原生 JS
涉及到的操作比較多，包含鍵盤(pán)、鼠標(biāo)右鍵、全選等
能對(duì)框選的內(nèi)容進(jìn)行分類(lèi)，區(qū)別 html 和 text，更方便的看出用戶(hù)選擇了哪些內(nèi)容

在線(xiàn)咨詢(xún)

上一篇：輕松添加！批量處理HTML文本，快速添加所需內(nèi)容！
下一篇：CSS 金屬樣式開(kāi)關(guān)按鈕 #web前端

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

JavaScript 鼠標(biāo)拖拽

html中，我們經(jīng)常會(huì)用到table布局；有時(shí)候需要實(shí)現(xiàn)指定單元格，當(dāng)鼠標(biāo)移動(dòng)到上面的時(shí)候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

S 鼠標(biāo)框選（頁(yè)面選擇）時(shí)返回對(duì)應(yīng)的 HTML 或文案內(nèi)容

一、需求背景

1、項(xiàng)目需求

2、需求解析

二、技術(shù)要點(diǎn)

1、debounce

2、addEventListener

3、Range

3.1. 創(chuàng)建 Range 實(shí)例，并設(shè)置起始位置

3.1.1 瀏覽器兼容情況

3.2. Range 屬性

3.2.1. 用我們上面創(chuàng)建的實(shí)例來(lái)看下 range 屬性的值

3.2.2. 如果我們只選擇文本內(nèi)容時(shí)

3.3. Range 方法

3.4. 創(chuàng)建 Range 的方法

3.4.1. Document.createRange

3.4.2. Selection 的 getRangeAt() 方法

3.4.3. caretRangeFromPoint() 方法

3.4.4. Range() 構(gòu)造函數(shù)

3.5. Range 兼容性

4、Selection

4.1. 獲取文本對(duì)象

4.2. Selection 術(shù)語(yǔ)

4.2.1. 錨點(diǎn) (anchor)

4.2.2. 焦點(diǎn) (focus)

4.2.3. 范圍 (range)

4.2.4. 可編輯元素 (editing host)

4.3. Selection 的屬性

4.4. Selection 方法

4.5. Selection 兼容性

三、項(xiàng)目實(shí)現(xiàn)

1、實(shí)現(xiàn)思路

2、簡(jiǎn)易流程圖

2、Debounce 方法實(shí)現(xiàn)

2.1. JS

2.2. TS

3、獲取選擇的文本/html 元素

3.1. 獲取文本/html 元素

3.2. 只需要文本

4、添加事件監(jiān)聽(tīng)

5、返回內(nèi)容

5.1. 純文本內(nèi)容

5.2. html 格式

6. 完整 JS 代碼

四、總結(jié)

您的項(xiàng)目需求