¿Cómo obtener la palabra debajo del cursor?

Question

Suponiendo que hay un evento mousestop adjunto a todo el documento, ¿cuál es la mejor manera de averiguar la palabra exacta debajo del cursor (si hay texto), cuando el mouse deja de moverse?

Puedo obtener el elemento subyacente (jQuery) del controlador de eventos - $(document.elementFromPoint(e.clientX, e.clientY)) - pero ¿qué sigue?

Hasta ahora mi idea es reemplazar todos los nodos de texto dentro del elemento hit con su copia donde cada palabra está envuelta en un elemento DOM (no sé cuál) y luego llamar al $(document.elementFromPoint(e.clientX, e.clientY)) nuevamente para obtener el elemento que contiene la palabra debajo del mouse
Pero parece un plan complicado y me pregunto si me está perdiendo algo más simple.

Answer 1

Bueno, no hay trucos de magia hasta el momento, así que aquí es la aburrida aburrida (y todavía trabajo) solución:

$(document.body).mousemove(function(e){ 

    var onmousestop = function() { 
     function getHitWord(hit_elem) { 
     var hit_word = ''; 
     hit_elem = $(hit_elem); 

     //text contents of hit element 
     var text_nodes = hit_elem.contents().filter(function(){ 
      return this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/[a-zA-Z]{2,}/) 
     }); 

     //bunch of text under cursor? break it into words 
     if (text_nodes.length > 0) { 
      var original_content = hit_elem.clone(); 

      //wrap every word in every node in a dom element 
      text_nodes.replaceWith(function(i) { 
      return $(this).text().replace(/([a-zA-Z-]*)/g, "<word>$1</word>") 
      }); 

      //get the exact word under cursor 
      var hit_word_elem = document.elementFromPoint(e.clientX, e.clientY); 

      if (hit_word_elem.nodeName != 'WORD') { 
      console.log("missed!"); 
      } 
      else { 
      hit_word = $(hit_word_elem).text(); 
      console.log("got it: "+hit_word); 
      } 

      hit_elem.replaceWith(original_content); 
     } 

     return hit_word; 
     } 

     var hit_word = getHitWord(document.elementFromPoint(e.clientX, e.clientY)); 
     ... 
    } 
    } 

Hay algunas otras sutilezas involucradas (como el evento 'reducción de ruido', mantener el contexto dom reemplazado (como la selección) y demás), pero se entiende la idea.

Here puede aprender cómo configurar el evento de mousestop.

EDIT:

Fabricación de elementos de HTML personalizadas pueden no ser tan estrecho hacia adelante en el IE (quién lo hubiera pensado?). Ver más here.

Answer 2

que no tienen ningún código para usted, pero tal vez esto puede ser de un poco de ayuda:

1. Cuando el cursor está en reposo, obtener coordenadas
2. Búsqueda de elementos dentro de la página en la parte superior de coordenadas
3. usar algo como var s = getElementById('ElementIDFoundinStepAbove').innerHTML;

Eso parece un enfoque bastante lógico, sin embargo, no sé si esto es posible.

---

Editar:

acabo de encontrar este post en S/S:

2444430

espero que esto ayude.

:)

Jason