Estoy intentando bloquear la entrada del usuario cuando cssDisableUserInput es true .
Básicamente, dentro de mis etiquetas principales tengo esto:
<div id=userinput disabled={cssDisableUserinput}> <div id="map"> </div>dentro de mi CSS tengo:
<style> #map { width: 1300px; height: 800px; } #userinput{ width: 1300px; height: 800px; pointer-events: none; } </style> Y, sin embargo, bloquea por completo la entrada del usuario incluso cuando cssDisableUserinput es false .
¿Cuál es un mejor enfoque para bloquear la entrada del usuario?
Lo que impide la interacción son pointer-events: none; , no disabled . No puede deshabilitar un div . Es posible que desee extraer esa propiedad en una clase separada y aplicarla condicionalmente usando su indicador cssDisableUserinput .
<div class:disable-events={cssDisableUserinput}>...</div> <style> .disable-events { pointer-events: none; } </style>(No conozco la API de Mapbox, tal vez haya un mecanismo incorporado que sería más adecuado para lograr esto. El enfoque anterior aún puede permitir la interacción a través del teclado).