Tengo un documento HTML con unas 30.000 palabras.
Me gustaría poder hacer algo cuando un usuario hace clic en cualquier palabra. Por simplicidad/concepto en este momento, solo me gustaría alert() esa palabra.
Por ejemplo, en el párrafo sobre, si tuviera que hacer clic en "tener", debería ejecutar alert("have") .
Estoy usando jQuery.
var p = $('p'); p .html(function(index, oldHtml) { return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>') }) .click(function(event) { alert(event.target.innerHTML) });Tomé en cuenta las sugerencias de Pablo Fernández .
Entonces, ¿será eficaz (por ejemplo, no congelará el navegador de un usuario lento?) Además, ¿podría explicar cómo funciona event.target?
Es muy posible que ralentice el rendimiento de una página con 30.000 palabras. Yo diría que es excesivo y probablemente se beneficiaría de estar paginado, pero no sé sus circunstancias exactas.
La propiedad event.target contiene el elemento que inició el evento: el evento se expande/se propaga a su padre, que luego maneja el evento, por lo que no tiene 30,000 eventos en elementos de span separados.
Desafortunadamente, creo que deberá procesar el texto y colocar <span class ='clickableWord'> YOUR_WORD </span> alrededor de cada palabra.
Entonces:
$(".clickableWord").click( function(this){alert(this.text());} );Cualquier método que intente utilizar el posicionamiento absoluto para ubicar la palabra está sujeto a problemas con el zoom, el tamaño de las fuentes, etc.
Se ha abordado aquí Obtención de texto en la ubicación en la que se hizo clic en un elemento HTML
¿Hay un documento HTML estático o lo estás generando? Si lo está generando, no debería ser demasiado difícil agregar esas etiquetas alrededor de cada palabra.
Si necesita hacerlo en un HTML existente después del hecho, entonces esto es un poco más difícil. Elija los elementos (probablemente div o p) que contengan la mayoría de las palabras y lea estas palabras en una matriz. Luego vuelva a generarlos seguidos de esas etiquetas de intervalo
Llego un poco tarde a la fiesta por lo que veo.
Prueba este.
<div id="text"><!-- text --></div>
init() function init() { addListeners(); adjustText(document.getElementById("text")); } function addListeners() { document.body.onclick = clicked; } function adjustText(holder) { text = holder.innerHTML.split(" "); holder.innerHTML = ""; for(var i=0;i<text.length;i++) { text[i] = text[i].replace("\n", ""); var newText = document.createElement("span"); var leadSpace = document.createTextNode(" "); var endSpace = document.createTextNode(" "); newText.innerHTML = text[i]; holder.appendChild(leadSpace); holder.appendChild(newText); holder.appendChild(endSpace); } } function clicked(evt) { if(evt.target.tagName == "SPAN" && evt.target.innerHTML) { alert(evt.target.innerHTML); } }