如何使用 JavaScript 和瀏覽器 API 檢測文字區塊中的哪個單字被點擊？

使用JavaScript 和瀏覽器API 偵測文字中被點擊的單字

問題涉及偵測網頁上的文字中哪個單字被點擊，以及將其儲存在變數中。雖然先前的解決方案涉及為每個單字添加單獨的類別元素並使用 jQuery 捕獲點擊，但事實證明它效率低下且在視覺上沒有吸引力。

改進的JavaScript 解決方案

更有效率解決方案利用瀏覽器選擇功能：

1. 為具有可點擊文字的元素定義一個類，例如

   。

2. 使用JavaScript 捕捉對該類別的點擊:

<code class="javascript">$(".clickable").click(function(e) {
  s = window.getSelection();
  var range = s.getRangeAt(0);
  var node = s.anchorNode;

  // Find starting point
  while (range.toString().indexOf(" ") != 0) {
    range.setStart(node, range.startOffset - 1);
  }
  range.setStart(node, range.startOffset + 1);

  // Find ending point
  do {
    range.setEnd(node, range.endOffset + 1);
  } while (
    range.toString().indexOf(" ") == -1 &&
    range.toString().trim() != ""
  );

  // Alert result
  var str = range.toString().trim();
  alert(str);
});</code>

瀏覽器API 解決方案

如果單獨使用JavaScript 不夠，請考慮利用瀏覽器API：

• 文件物件模型(DOM)： 存取和操作HTML 元素，包括文字節點。
• ElementFromPoint() 方法： 擷取頁面上給定座標處的元素，允許
• 指標事件API： 監控特定元素上的指標事件（例如單擊），提供有關單擊位置的詳細資訊。

使用瀏覽器擴充擴充功能

如有需要，您可以開發瀏覽器擴充功能來增強功能：

• 內容腳本： 將JavaScript 注入網頁以監控特定元素的點擊。
• 事件監聽器： 指派事件處理程序來偵測使用者操作，例如點擊。
• API整合：利用瀏覽器API，例如上述的，來存取和操作網頁元素。

透過結合JavaScript和瀏覽器API，您可以有效地建立一個使用者友善的介面，其中使用者可以點擊文字中的單字並將點擊的單字儲存在變數中。

以上是如何使用 JavaScript 和瀏覽器 API 檢測文字區塊中的哪個單字被點擊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！