Usando un script Java, puede hacer una selección. Esto será equivalente a seleccionar con el cursor del ratón. El código que agregué a la pregunta hace una selección de cada elemento dentro del contenedor en el que hace clic, pero la selección anterior desaparece. ¿Se puede cambiar esto?
const selectElement = (element) => { const range = document.createRange(); range.selectNode(element); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } const container = document.getElementById("container"); container.addEventListener('click', (event) => { const x = event.pageX; const y = event.pageY; selectElement(document.elementFromPoint(x, y)); }); <!DOCTYPE html> <html lang="en"> <head> <title>Code snippet</title> </head> <body> <div id="container"> <div id="firstElement"> First element text </div> <div id="secondElement"> Second element text </div> </div> </body> </html> EDITAR: para una mejor comprensión, agregué un segundo fragmento que hace lo que me gustaría obtener, pero sin usar window.getSelection().addRange() .
const selectElement = (element) => { element.style.backgroundColor = 'blue'; element.style.color = 'white'; } const container = document.getElementById("container"); container.addEventListener('click', (event) => { const x = event.pageX; const y = event.pageY; selectElement(document.elementFromPoint(x, y)); }); <!DOCTYPE html> <html lang="en"> <head> <title>Code snippet</title> </head> <body> <div id="container"> <div id="firstElement"> First element text </div> <div id="secondElement"> Second element text </div> </div> </body> </html>Según la otra respuesta y MDN, solo funciona en FF.
https://stackoverflow.com/a/70175542/4860688
https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange#example
Pero, aquí está cómo hacerlo en FF:
Mover el foco y/o hacer clic en los elementos generalmente (¿siempre?) Elimina la selección anterior según el comportamiento de selección de la interfaz de usuario bastante estándar.
Si desea conservar los rangos de selección anteriores, deberá almacenarlos por separado y volver a agregarlos a los rangos de selección de la ventana.
Obviamente, esto es contrario a la intuición de cualquier expectativa del usuario, pero no voy a suponer nada sobre por qué quieres esto :)
var ranges = []; const selectElement = (element) => { const range = document.createRange(); range.selectNode(element); ranges.push(range); const selection = window.getSelection(); ranges.forEach(r => selection.addRange(r)); } const container = document.getElementById("container"); container.addEventListener('click', (event) => { selectElement(event.target); }); <!DOCTYPE html> <html lang="en"> <head> <title>Code snippet</title> </head> <body> <div id="container"> <div id="firstElement"> First element text </div> <div id="secondElement"> Second element text </div> </div> </body> </html>Tenga en cuenta que si hace clic fuera de su contenedor div, las selecciones se borran; este es el comportamiento estándar y dado que su detector de eventos solo está en el div, las selecciones no se restauran. Si desea cambiar eso, mueva su detector de eventos al cuerpo.