Tengo algunos activos en mi página que están cerca uno del otro. Cuando un usuario toca/mantiene presionado en algún lugar cuando hay otro elemento cerca, quiero abrir una interacción para aclarar qué elemento realmente quiere.
No puedo hacer que los recursos estén más separados porque sigo al equipo de diseño. Para hacer las cosas más complicadas, estos elementos están en un mapa, por lo que puede hacer zoom y desplazarse, lo que cambia la propiedad de translate . La biblioteca que estamos usando para la panorámica y el zoom es Panzoom .
Me encontré con document.elementFromPoint() que podría funcionar para recopilar los elementos. Pero, ¿no tendría que pasar por algún tipo de verificación para cada píxel alrededor del punto? ¿Algo así como 360 grados * radio de cantidad de cheques? Eso me parece súper exagerado.
Las coordenadas del evento de clic se pueden recuperar a través de las propiedades clientX y clientY .
Puede recorrer cada elemento y calcular la distancia entre las propiedades x e y del evento de clic y las coordenadas x e y del elemento (logrado al obtener las propiedades top e left después de llamar a getBoundingClientRect() ).
const targets = document.querySelectorAll('.target'); document.addEventListener('click', function(e) { const x = e.clientX; const y = e.clientY; var minDist; var minDistElem; targets.forEach(e => { const eRect = e.getBoundingClientRect(); const eX = eRect.left; const eY = eRect.top; var a = x - eX; var b = y - eY; var c = Math.sqrt(a * a + b * b); //distance if (!minDist || c < minDist) { minDist = c; minDistElem = e; } e.classList.remove('closest'); }) minDistElem.classList.add('closest'); }) .target{height:20px;width:20px;border:2px solid;display:flex;align-items:center;justify-content:center;position:absolute}#target1{top:50px;left:100px}#target2{top:50px;left:200px}#target3{top:100px;left:100px}#target4{top:100px;left:200px}.closest{background-color:lightgreen} <div class="target" id="target1">1</div> <div class="target" id="target2">2</div> <div class="target" id="target3">3</div> <div class="target" id="target4">4</div>