如何使用 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中文网其他相关文章！