如何阻止Flex容器鼠标事件穿透?

Question

在 webview 控件上放了一层 flex 容器作为遮罩，但这个遮罩鼠标事件（hover / click 等）都会穿透到后面的 webview，触摸事件则不会，请问应该如何设置处理来阻止鼠标事件穿透？

Answer 1

可以参考使用此方法解决：.onMouse((event) => { event.stopPropagation() })

MouseEvent的回调函数stopPropagation用于设置当前事件是否阻止冒泡。

示例代码：

Button(this.isHovered ? 'Hovered!' : 'Not Hover') 
  .width(200) 
  .height(100) 
  .backgroundColor(this.isHovered ? Color.Green : Color.Gray) 
  .onHover((isHover: boolean) => { 
    this.isHovered = isHover; 
  }) 
  .onMouse((event: MouseEvent) => { 
    event.stopPropagation(); // 在Button的onMouse事件中设置阻止冒泡 
    this.buttonText = 'Button onMouse:\n' + '' + 
      'button = ' + event.button + '\n' + 
      'action = ' + event.action + '\n' + 
      'x,y = (' + event.x + ',' + event.y + ')' + '\n' + 
      'screenXY=(' + event.screenX + ',' + event.screenY + ')'; 
  })

参考链接：
stopPropagation