52 votos

cómo obtener una palabra bajo el cursor con JavaScript

en este caso: <p> some long text </p>

¿cómo puedo saber que el cursor del ratón está sobre el "texto" de la palabra?

33voto

Eyal Puntos 2552

Mi otra respuesta sólo funciona en Firefox. Esta respuesta funciona en Chrome. (Podría funcionar en Firefox, demasiado, no sé.)

function getWordAtPoint(elem, x, y) {
  if(elem.nodeType == elem.TEXT_NODE) {
    var range = elem.ownerDocument.createRange();
    range.selectNodeContents(elem);
    var currentPos = 0;
    var endPos = range.endOffset;
    while(currentPos+1 < endPos) {
      range.setStart(elem, currentPos);
      range.setEnd(elem, currentPos+1);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.expand("word");
        var ret = range.toString();
        range.detach();
        return(ret);
      }
      currentPos += 1;
    }
  } else {
    for(var i = 0; i < elem.childNodes.length; i++) {
      var range = elem.childNodes[i].ownerDocument.createRange();
      range.selectNodeContents(elem.childNodes[i]);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.detach();
        return(getWordAtPoint(elem.childNodes[i], x, y));
      } else {
        range.detach();
      }
    }
  }
  return(null);
}    

En su mousemove controlador, llame a getWordAtPoint(e.target, e.x, e.y);

33voto

Damovisa Puntos 6756

Adicional a las otras dos respuestas, usted puede ser capaz de dividir los párrafos de arriba hacia extiende usando jQuery (javascript en general).

De esa manera, usted no necesita pensar acerca de la salida de su texto se extiende alrededor de las palabras. Deje que su javascript hacerlo para usted.

por ejemplo,

<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
Word: <span id="word"></span>

<script type="text/javascript">
    $(function() {
        // wrap words in spans
        $('p').each(function() {
            var $this = $(this);
            $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
        });

        // bind to each span
        $('p span').hover(
            function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
            function() { $('#word').text(''); $(this).css('background-color',''); }
        );
    });
</script>

Tenga en cuenta que el código de arriba, mientras se trabaja, se tira todo el código html dentro de sus etiquetas de párrafo.

11voto

Matt Puntos 38395

A mi conocimiento, no se puede.

Única cosa que puedo pensar es poner cada una de las palabras en su propio elemento, a continuación, aplicar el ratón sobre los eventos a los elementos.

<p><span>Some</span> <span>long</span> <span>text</span></p>

<script>
$(document).ready(function () {
  $('p span').bind('mouseenter', function () {
    alert($(this).html() + " is what you're currently hovering over!");
  });
});
</script>

4voto

Rubens Mariuzzo Puntos 6022

Esta una demostración en vivo de cómo obtener una palabra bajo el cursor con JavaScript basado en el código fuente proporcionado por Damovisa: http://jsfiddle.net/5gyRx/.

2voto

amphetamachine Puntos 7384

Usted probablemente tendría que romper el párrafo para que cada palabra estaba contenida dentro de su propio elemento <span> y, a continuación, agregue onmouseover atributos de evento para cada uno de ellos.

..Y creo que te refieres "<p>texto</p>"; barras diagonales inversas no son parte de HTML.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X