Si abre Google Maps en Chrome/Firefox en una computadora portátil con un trackpad, si hace zoom con los dedos, simplemente amplía el mapa y los elementos flotantes de la interfaz de usuario permanecen estáticos. Entonces sé que lo que estoy tratando de hacer es posible.
Parece que el navegador no emite eventos touch* para los toques del trackpad en los navegadores de escritorio, pero sí emite una serie de eventos de wheel (con event.ctrlKey establecido en true ) para un gesto de pellizco y zoom del trackpad.
El problema es que, incluso con event.preventDefault() , el navegador siempre hace zoom en toda la página. Parece que llamar a preventDefault() en un evento de wheel solo muestra esta advertencia en la consola (Chrome 92):
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312`(La URL en la advertencia no parece ser útil).
Intenté usar la misma etiqueta meta de ventana gráfica que Google Maps ( <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> ) pero no ayuda
Entonces, ¿cómo lo hace Google Maps? ¿Cómo evitan el comportamiento predeterminado (hacer zoom en toda la página) cuando pellizcas el zoom en el trackpad?
No tengo un trackpad a mano, pero como dijiste que se emitieron eventos wheel , asumo que el contexto es el mismo al usar la rueda de un mouse.
Llamar a addEventListener() con {passive: false} como su tercer argumento lo hará.
A saber:
window.addEventListener('wheel', function(e) { e.preventDefault() ... }, {passive: false}) En el documento de addEventListener() , la descripción de la opción passive establece que:
Un valor booleano que, si es verdadero, indica que la función especificada por el oyente nunca llamará a preventDefault(). Si un oyente pasivo llama a preventDefault(), el agente de usuario no hará nada más que generar una advertencia en la consola.
Y de acuerdo con la sección titulada " Mejorar el rendimiento del desplazamiento con oyentes pasivos " en la misma página:
De acuerdo con la especificación, el valor predeterminado para la opción pasiva siempre es falso. Sin embargo, esto presenta la posibilidad de que los detectores de eventos manejen ciertos eventos táctiles (entre otros) para bloquear el hilo principal del navegador mientras intenta manejar el desplazamiento, lo que posiblemente resulte en una enorme reducción en el rendimiento durante el manejo del desplazamiento.
Para evitar este problema, algunos navegadores (en concreto, Chrome y Firefox) han cambiado el valor predeterminado de la opción pasiva a verdadero para los eventos touchstart y touchmove en los nodos de nivel de documento Window, Document y Document.body. Esto evita que se llame al detector de eventos, por lo que no puede bloquear la representación de la página mientras el usuario se desplaza.
Aunque el párrafo anterior solo menciona los eventos touchstart y touchmove , descubrí que también se aplica al evento wheel en Chrome y Firefox.
Entonces, si desea que preventDefault() funcione, debe establecer específicamente la opción passive en false .