I have a javascript-event from en external library like this:
this.flky.on('staticClick', (e) => { this.setState({mobileZoom: true})
When I click it, an image gets expanded:
<img onClick={this.state.zoom && () => {this.setState({mobileZoom: false}}}
style={...this.state.mobileZoom && {position: 'absolute', top: 0, left: 0, width: 'auto', zIndex: 1070}}
/>
This works on desktop, but on mobil, the onClick-event of the full-screen image also get's triggered, causing the image to just flicker and then disapear again.
It works if I add a delay:
this.flky.on('staticClick', (e) => {
setTimeout(() => { this.setState({mobileZoom: true}) }, 100)
)
but I have no idea how long the click event lasts on different devices, so this is not a sustainable solution and bad practice. Is there a better way?
You can use event.stopPropagation() to stop bubbling event further
this.flky.on('staticClick', (e) => {
if (event.stopPropagation){ //checking browser support
event.stopPropagation();
}else{
window.event.cancelBubble = true;
}
this.setState({mobileZoom: true});
)
As an example
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>It looks like you have typo in the onClick:
<img onClick={this.state.mobileZoom && () => {this.setState({mobileZoom: false}}}
style={...this.state.mobileZoom && {position: 'absolute', top: 0, left: 0, width: 'auto', zIndex: 1070}}
/>