点击事件冒泡不符合预期

测试代码如下:

@Entry 
@Component 
struct Index { 
  private arr: number[] = [0] 
 
  build() { 
    Stack() { 
 
      Text("父子关系") 
        .position({ x: 100, y: 50 }) 
        .height(50) 
        .width(100) 
      Stack() { 
        List() { 
          ListItemGroup() { 
            ForEach(this.arr, (item: number) => { 
              ListItem() { 
                Text(item.toString()) 
                  .width('100%') 
                  .height(100) 
                  .backgroundColor(Color.Red) 
                  .fontSize(16) 
                  .textAlign(TextAlign.Center) 
              } 
              // .onClick((event:ClickEvent) => { 
              // console.log(“事件响应:onClick 子节点(list中cell)点击红色”) 
              // }) 
              .onTouch((event: TouchEvent) => { 
                if (event.type == TouchType.Down) { 
                  console.log("事件响应: onTouch 子节点(list中cell)点击红色") 
                } 
                event.stopPropagation() 
              }) 
            }, (item: string) => item) 
          } 
        } 
        .width(150) 
        .height(130) 
      } 
      .position({ x: 100, y: 100 }) 
      .width(150) 
      .height(130) 
      .backgroundColor(Color.Gray) 
      .borderWidth(2) 
      .borderColor(Color.Black) 
      .clip(false) 
      .onClick((event: ClickEvent) => { 
        console.log("事件响应: onClick 父节点 点击灰色") 
      }) 
    } 
    .width("100%") 
    .height("100%") 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.

onTouch 子节点(list中cell)点击红色

onClick 父节点 点击灰色

期望效果:

onTouch 子节点(list中cell)点击红色

子节点onTouch 已经设置阻止冒泡,父节点不应该影响 onClick事件

HarmonyOS
2024-06-05 20:46:01
1263浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
hmogy

stopPropagation阻止冒泡是onTouch的方法,不支持阻止点击事件的冒泡,onClick点击事件默认阻止事件冒泡。

例如:子组件注册了点击事件,则不管onTouch中stopPropagation是否阻止onTouch事件的冒泡,父组件的onClick时间均不会触发,onTouch和onClick时间互不影响。

分享
微博
QQ
微信
回复
2024-06-06 21:16:12


相关问题
HarmonyOS BlendMode显示效果不符合预期
698浏览 • 1回复 待解决
RichText组件font标签size属性不符合预期
2497浏览 • 1回复 待解决
HarmonyOS 不符合UI组件语法
783浏览 • 1回复 待解决
HarmonyOS 3DES的key长度不符合
555浏览 • 1回复 待解决
元服务UI不符合设计规范?
149浏览 • 0回复 待解决
HarmonyOS 轨迹线样式和预期不符
568浏览 • 1回复 待解决
HarmonyOS Text添加动画效果与预期不符
666浏览 • 1回复 待解决
HarmonyOS onClick事件如何阻止事件冒泡
779浏览 • 1回复 待解决
恭喜您,今日已阅读两篇内容,特奖励+2声望, 快来领取吧。