HarmonyOS鸿蒙Next中ContextMenu点击非菜单区域,点击事件会穿透到下层组件,这应该是个Bug吗?

HarmonyOS鸿蒙Next中ContextMenu点击非菜单区域,点击事件会穿透到下层组件,这应该是个Bug吗? ContextMenu绑定一个list item后,长按弹出菜单,点击非菜单区域,菜单虽然关闭了,但是点击事件会穿透到下层组件,触发它们的点击事件,比如会触发List item的点击事件,非常不友好。查看文档,也没有发现可以设置遮罩的方法,大家有遇到这样的问题,知道怎么解决吗?

4 回复

bindContextMenu弹出菜单默认没有蒙层,所以点击其他区域菜单消失的时候,如果被点击区域绑定了点击事件,就会触发其点击事件。

如果是长按弹出,则可以添加个预览内容,会带一个蒙层;

或者利用代码逻辑判断处理,

也可以使用popup弹窗模拟一个菜单,popup默认会带一个透明蒙层,可参考代码如下:

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index3 {
  private list: string[] = []
  private scroller = new Scroller()
  @State flag: boolean[] = new Array(10).fill(false)

  aboutToAppear(): void {
    for (let i = 0; i < 10; i++) {
      this.list.push(`选项${i}`)
    }
  }

  @Builder
  menu() {
    Column({ space: 10 }) {
      Text('组件1')
      Text('组件2')
    }
    .width(100)
  }

  build() {
    Column() {
      List({ scroller: this.scroller, initialIndex: this.list.length - 1, space: 10 }) {
        ForEach(this.list, (item: string, index: number) => {
          ListItem() {
            Row() {
              Text(item)
            }
            .padding(5)
            .width('70%')
            .backgroundColor(Color.White)
            .onClick(() => {
              promptAction.showToast({ message: item })
            })
          }
          .width('100%')
          .padding(10)
          .backgroundColor(Color.Orange)
          .bindContextMenu(this.menu(), ResponseType.LongPress, {
            preview: () => {},
          })
        })
      }
      .layoutWeight(1)
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中ContextMenu点击非菜单区域,点击事件会穿透到下层组件,这应该是个Bug吗?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我就是试过有问题才发的贴子哈,

在HarmonyOS鸿蒙Next中,ContextMenu点击非菜单区域时,点击事件穿透到下层组件的行为并非Bug,而是设计上的默认行为。ContextMenu的设计初衷是提供快捷操作,当用户点击非菜单区域时,系统会认为用户希望关闭菜单并继续与下层组件交互。如果你希望阻止事件穿透,可以通过在ContextMenu的onDismiss回调中处理相关逻辑,或者使用事件拦截机制来阻止事件传递。

回到顶部