JavaScript とブラウザ API を使用して、テキスト ブロック内のどの単語がクリックされたかを検出するにはどうすればよいですか?

JavaScript とブラウザ API を使用したテキスト内のクリックされた単語の検出

この問題には、Web ページ上のテキスト内でどの単語がクリックされたかを検出することが含まれます。それを変数に格納します。以前のソリューションでは、単語ごとに個別のクラス要素を追加し、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: 特定の要素上のポインター イベント (クリックなど) を監視し、クリックされた位置に関する詳細情報を提供します。

ブラウザ拡張機能による機能の拡張

必要に応じて、ブラウザ拡張機能を開発して機能を強化できます:

• コンテンツ スクリプト: Web ページに JavaScript を挿入して、特定の要素のクリックを監視します。
• イベント リスナー: クリックなどのユーザー アクションを検出するイベント ハンドラーを割り当てます。
• API 統合: 上記のようなブラウザ API を利用して、Web ページ要素にアクセスして操作します。

JavaScript とブラウザ API を組み合わせることで、ユーザーフレンドリーなインターフェイスを効果的に作成できます。ユーザーはテキスト内の単語をクリックし、クリックした単語を変数に保存できます。

以上がJavaScript とブラウザ API を使用して、テキスト ブロック内のどの単語がクリックされたかを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。