Tengo un evento javascript de una biblioteca externa como esta:
this.flky.on('staticClick', (e) => { this.setState({mobileZoom: true})Cuando hago clic en él, una imagen se expande:
<img onClick={this.state.zoom && () => {this.setState({mobileZoom: false}}} style={...this.state.mobileZoom && {position: 'absolute', top: 0, left: 0, width: 'auto', zIndex: 1070}} />Esto funciona en el escritorio, pero en el móvil, el evento onClick de la imagen de pantalla completa también se activa, lo que hace que la imagen parpadee y luego desaparezca nuevamente.
Funciona si agrego un retraso:
this.flky.on('staticClick', (e) => { setTimeout(() => { this.setState({mobileZoom: true}) }, 100) )pero no tengo idea de cuánto dura el evento de clic en diferentes dispositivos, por lo que esta no es una solución sostenible y una mala práctica. ¿Hay una mejor manera?
Puede usar event.stopPropagation() para detener el event burbujeante más
this.flky.on('staticClick', (e) => { if (event.stopPropagation){ //checking browser support event.stopPropagation(); }else{ window.event.cancelBubble = true; } this.setState({mobileZoom: true}); )Como ejemplo
function inside(e){ e.stopPropagation(); alert('you clicked inside'); } function outside(e){ alert('you clicked ouside'); } <div onclick="outside(event)"> Outside <div onclick="inside(event)">Inside</div> </div>Parece que tienes un error tipográfico en el onClick :
<img onClick={this.state.mobileZoom && () => {this.setState({mobileZoom: false}}} style={...this.state.mobileZoom && {position: 'absolute', top: 0, left: 0, width: 'auto', zIndex: 1070}} />