Comment détecter les clics sur les mots dans le texte en Javascript sans analyse de classe ?

Détecter les clics sur les mots dans le texte sans analyse de classe

En Javascript, détecter avec précision les clics sur les mots dans un texte peut être difficile. Une approche courante mais inefficace consiste à analyser l'intégralité du document HTML en ajoutant éléments autour de chaque mot et en utilisant jQuery pour suivre les clics sur ces étendues.

Cependant, une solution plus raffinée est désormais disponible :

Utilisation de l'API de sélection de fenêtre

L'API de sélection de fenêtre fournit un moyen de récupérer le texte actuellement sélectionné. En tirant parti de cette API, nous pouvons implémenter un mécanisme de détection de clics sans avoir besoin d'une analyse HTML approfondie.

Voici un extrait de code 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>

Dans cet extrait, nous utilisons un écouteur de clics pour activer l'API de sélection. En analysant les positions de début et de fin de la sélection, nous pouvons extraire le mot cliqué.

Considérations sur l'API du navigateur

Cette solution est compatible avec Webkit, Mozilla et IE9. . Si vous avez l'intention de l'utiliser comme extension de navigateur, assurez-vous que les API sous-jacentes sont prises en charge dans vos navigateurs cibles.

Alternative de mise en évidence

Comme alternative, envisagez d'utiliser le La fonctionnalité de surbrillance du texte au lieu de cliquer peut offrir une expérience utilisateur plus simple.

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!