Una solución sería insertar cada texto en una etiqueta <p> . El <p> se extenderá por todo el contenedor. Dentro de <p> , envolvería cada parte del texto en una etiqueta <span> . Entonces, cada vez que los usuarios hacen clic en el texto, el objetivo del evento sería el elemento span, y cuando los usuarios hacen clic en el espacio en blanco, el objetivo del evento sería el elemento ap.

 document.querySelector(".container").addEventListener("click", function(e){ if(e.target.localName == "p") { //whitespace } if(e.target.localName == "span") { //text } });

No creo que puedas verificar si alguien hizo clic en el espacio vacío de un elemento.

La mejor manera de hacer esto es crear div como el borde del cuadro de texto y verificar con javascript si el usuario hizo clic en el borde.

 document.getElementById("drag-border").addEventListener("click",function(event){ //This if blocks calling rest of function when user clicks on textbox and not on border if (event.currentTarget !== event.target) { return; } console.log( "Clicked on border" ); });

 .container{ min-width: 100px; width: min-content; height: min-content; } .textbox{ min-width: 100px; width: min-content; border: 1px solid black; background: white; } #drag-border{ background: red; padding: 10px; border: 1px solid black; }

 <div class="container"> <div id="drag-border"> <div class="textbox" contenteditable="true"></div> </div> </div>