如何阻止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
相关问题
Scroll内Flex加宽高与滑动冲突
94浏览 • 1回复 待解决
ArkTs如何自定义容器组件?
672浏览 • 1回复 待解决
如何隐藏容器组件的溢出内容
127浏览 • 1回复 待解决
docker 容器怎么选择时区?
597浏览 • 1回复 待解决
docker删除所有的容器
2844浏览 • 2回复 待解决
长按事件如何重复触发
200浏览 • 1回复 待解决
TextInput的onSubmit事件如何使用
107浏览 • 1回复 待解决
如何屏蔽List的滑动事件
47浏览 • 1回复 待解决
docker 创建 redis 容器
703浏览 • 1回复 待解决
如何容器定位到屏幕的最底部
80浏览 • 1回复 待解决
docker stack deploy后容器启动失败
339浏览 • 1回复 待解决
服务卡片java如何设置点击事件
7197浏览 • 1回复 待解决