Comment puis-je détecter quel mot dans un bloc de texte a été cliqué à l'aide de JavaScript et des API du navigateur ?

Détection du mot sur lequel on a cliqué dans le texte avec JavaScript et les API du navigateur

Le problème consiste à détecter le mot sur lequel on a cliqué dans un texte d'une page Web et le stocker dans une variable. Alors qu'une solution précédente impliquait l'ajout d'éléments de classe individuels pour chaque mot et l'utilisation de jQuery pour capturer les clics, elle s'est avérée inefficace et visuellement peu attrayante.

Solution JavaScript améliorée

Une solution plus efficace La solution exploite les fonctionnalités de sélection du navigateur :

1. Définissez une classe pour les éléments avec du texte cliquable, tel que

   .

2. Capturez les clics sur cette classe à l'aide de 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>

Solutions API de navigateur

Si JavaScript seul s'avère insuffisant, envisagez d'exploiter les API de navigateur :

• Modèle objet de document (DOM) : Accédez et manipulez des éléments HTML, y compris des nœuds de texte.
• Méthode ElementFromPoint() : Récupérez l'élément à une coordonnée donnée sur la page, permettant vous permet d'identifier le mot cliqué.
• API d'événements de pointeur : Surveillez les événements de pointeur (par exemple, les clics) sur des éléments spécifiques, en fournissant des informations détaillées sur l'emplacement cliqué.

Extension des fonctionnalités avec une extension de navigateur

Si nécessaire, vous pouvez développer une extension de navigateur pour améliorer la fonctionnalité :

• Scripts de contenu : Injectez du JavaScript dans les pages Web pour surveiller les clics sur des éléments spécifiques.
• Écouteurs d'événements : Attribuez des gestionnaires d'événements pour détecter les actions des utilisateurs, telles que les clics.
• Intégration des API : Utilisez les API du navigateur, telles que celles mentionnées ci-dessus, pour accéder et manipuler les éléments de la page Web.

En combinant JavaScript et les API du navigateur, vous pouvez créer efficacement une interface conviviale où les utilisateurs peuvent cliquer sur des mots dans le texte et stocker le mot cliqué dans une variable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!