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}}
 />

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

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

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

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

Answer 1

您可以使用event.stopPropagation()来阻止event进一步冒泡

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>

Answer 2

好像你在onClick：

中输了错字

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

如何在statechange之后注册onClick事件？

2 个答案: