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

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

HarmonyOS
2024-01-31 09:19:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shx2000

可以参考使用此方法解决:.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 + ')'; 
  })

已于2024-2-4 15:14:30修改
分享
微博
QQ
微信
回复
2024-02-01 17:04:09
相关问题
HarmonyOS flex容器布局
912浏览 • 2回复 待解决
HarmonyOS 事件穿透问题
549浏览 • 1回复 待解决
floating window可以设置事件穿透吗?
282浏览 • 1回复 待解决
组件有没有支持事件穿透的属性
1775浏览 • 1回复 待解决