如何使用 JavaScript 取得 Chrome 中遊標下的單字？

在 JavaScript 中取得遊標下的單字

在 Web 開發中，了解遊標目前懸停在哪個單字上可能很有用。本文介紹了一個專門在 Chrome 瀏覽器中工作的 JavaScript 解決方案。

函數概述

函數 getWordAtPoint 接受三個參數：一個元素 (elem)、一個 x 座標(x) 和 y 座標 (y)。它使用 Range 物件來迭代 HTML 元素的文字內容，並確定指定座標處遊標下的單字。

實作

函數第一檢查輸入元素是否為文字節點。如果是這樣，它會建立一個 Range 物件來選擇元素的文字內容。然後，它使用循環逐步選擇文字中的每個字符，並使用 getBoundingClientRect() 方法確定目前字符的邊界矩形是否包含指定的座標。如果找到匹配項，則使用 Expand() 方法將 Range 物件擴展為包含整個單字。最後，該函數傳回單字的字串表示形式。

如果輸入元素不是文字節點，則函數會遞歸迭代其子節點，直到找到包含指定座標的文字節點。

用法

要使用此函數，您可以將其附加到所需 HTML 元素上的 mousemove 事件處理程序。例如：

<code class="javascript">document.addEventListener('mousemove', (e) => {
  const word = getWordAtPoint(e.target, e.x, e.y);
  console.log(word);
});</code>

每次使用者將滑鼠移到指定元素上時，此程式碼都會將遊標下的單字記錄到控制台。

以上是如何使用 JavaScript 取得 Chrome 中遊標下的單字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！