如何阻止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 + ')'; 
  })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

已于2024-2-4 15:14:30修改
分享
微博
QQ
微信
回复
2024-02-01 17:04:09
相关问题
HarmonyOS flex容器布局
1849浏览 • 2回复 待解决
HarmonyOS 如何实现事件穿透
337浏览 • 1回复 待解决
HarmonyOS 事件穿透问题
1037浏览 • 1回复 待解决
HarmonyOS onClick事件如何阻止事件冒泡
775浏览 • 1回复 待解决
HarmonyOS ReactNavigation点击事件穿透
494浏览 • 1回复 待解决
组件有没有支持事件穿透的属性
2139浏览 • 1回复 待解决
floating window可以设置事件穿透吗?
556浏览 • 1回复 待解决