如何阻止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
相关问题
组件有没有支持事件穿透的属性
547浏览 • 1回复 待解决
如何实现悬浮窗桌面穿透
355浏览 • 1回复 待解决
Flex布局与w3c中的flex是否有差异
386浏览 • 1回复 待解决
Scroll内Flex加宽高与滑动冲突
739浏览 • 1回复 待解决
ArkTs如何自定义容器组件?
1691浏览 • 1回复 待解决
如何隐藏容器组件的溢出内容
953浏览 • 1回复 待解决
docker 创建 redis 容器
1326浏览 • 1回复 待解决
如何拦截onTouch事件传递
141浏览 • 1回复 待解决
长按事件如何重复触发
729浏览 • 1回复 待解决
如何容器定位到屏幕的最底部
853浏览 • 1回复 待解决
容器组件onVisibleAreaChange不生效
564浏览 • 1回复 待解决