在 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中文網其他相關文章！
