Esta es una demostración en vivo de Codepen aquí .
1)Haga clic en la viga para agregar el primer punto rojo
2)Haga clic en la viga para agregar el segundo punto rojo
3)Haga clic de nuevo en el primer punto rojo
Problema: verá que las coordenadas cambiarán o se detectarán al hacer clic en el primero y el segundo. Sin embargo, cuando vuelve a hacer clic en el primer punto, las coordenadas no se detectan y quizás se deban a su superposición. ¿Puedo preguntar si hay una solución para esto y mostrar una demostración :)
.red-dot { position:absolute; width:15px; height:15px; background:red; }para que funcione, puede agregar pointer-events: none; a su CSS.
entonces se verá así:
.red-dot { position:absolute; width:15px; height:15px; background:red; pointer-events: none; }de esta manera, el clic se ignorará y se aplicará en la cuadrícula en lugar del elemento cuadrado rojo