reactjs - statechange后如何注册onClick事件？

Question

我有一个来自外部库的 javascript 事件，如下所示:

this.flky.on('staticClick', (e) => { this.setState({mobileZoom: true})

当我单击它时，图像会展开:

 <img onClick={this.state.zoom && () => {this.setState({mobileZoom: false}}}
 style={...this.state.mobileZoom && {position: 'absolute', top: 0, left: 0, width: 'auto', zIndex: 1070}}
 />

这适用于桌面设备，但在移动设备上，全屏图像的 onClick 事件也会被触发，导致图像闪烁，然后再次消失。

如果我添加延迟，它就会起作用:

this.flky.on('staticClick', (e) => { 
    setTimeout(() => { this.setState({mobileZoom: true}) }, 100)
)

但我不知道点击事件在不同设备上持续多长时间，所以这不是一个可持续的解决方案和不好的做法。有更好的办法吗？

Answer 1

您可以使用event.stopPropagation()进一步停止事件冒泡

this.flky.on('staticClick', (e) => { 
    if (event.stopPropagation){ //checking browser support
       event.stopPropagation();
    }else{
      window.event.cancelBubble = true;
    }
    this.setState({mobileZoom: true});
)

举个例子

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>