Estoy usando Panzoom JS para acercar un mapa. Funciona tal como lo necesito para acercar y alejar el zoom en dispositivos móviles y de escritorio. Cuando hace clic en un elemento del mapa, tomo las coordenadas x/y relativas a la parte superior izquierda del contenedor teniendo en cuenta cualquier escala aplicada, luego busco esa ubicación/página en la base de datos y la abro. Todo esto funciona muy bien en el escritorio, pero no en el tacto. Necesito poder captar la ubicación de retoque (como si hubiera hecho clic con el mouse), pero solo si no hubo ningún movimiento táctil, para poder distinguir entre una panorámica/mover, un pellizco/zoom y un toque/ retoque (clic). No puedo encontrar ninguna documentación para resolver esto. Cualquier ayuda sería apreciada.
const elem = document.getElementById('map_inner_cont') window.panzoom = panzoom(elem, { zoomDoubleClickSpeed: 1, autocenter : true, bounds : true, initialZoom : 0.2, animate : true, maxZoom : 2 })Interesante, profundizando un poco en panzoom, puedo ver que está administrando tres conjuntos diferentes de eventos:
var events; if (typeof window.PointerEvent === 'function') { events = { down: 'pointerdown', move: 'pointermove', up: 'pointerup pointerleave pointercancel' }; } else if (typeof window.TouchEvent === 'function') { events = { down: 'touchstart', move: 'touchmove', up: 'touchend touchcancel' }; } else { events = { down: 'mousedown', move: 'mousemove', up: 'mouseup mouseleave' }; }Y supongo que event.preventDefault() para puntero hacia abajo no afecta el clic, mientras que touchstart en un dispositivo más antiguo sí, y es por eso que estamos viendo un comportamiento diferente.
Mi tentación es usar este mismo bloque usado anteriormente para cambiar el tipo de evento que estamos escuchando para que la propagación sea la misma, pero eso parece un poco frágil.
Preferiría que panzoom opcionalmente pasara eventos similares a clics como clics a sus hijos, ¿quizás? Podría intentar crear un PR en torno a eso, si tiene sentido.
por ejemplo, Panzoom ({propagateClicks: true})