鸿蒙开发之Touch事件拦截stopPropagation()

发布时间:2024年01月04日

在读Touch事件官方文档的时候,遇到了一个属性

其他属性都好理解,这个阻塞事件冒泡什么意思呢?官网也没有解释

后来查资料知道这个方法是阻止onTouch冒泡传递到父组件

show code

@Entry
@Component
struct OfficialTouchPage {
  @State message: string = ' touch me touch me'
  static idNumber = 0

  build() {
    Row() {
      Column() {
        Stack(){

          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .onTouch((touch: TouchEvent) => {
              this.message = 'touch type' + touch.type
              +'\n timestamp' +touch.timestamp
              +'\n source' +touch.source
            })

          Text('这是最上边的')
            .fontSize(30)
            .width(200)
            .height(200)
            .backgroundColor(Color.Brown)
            .fontWeight(FontWeight.Bold)
            .onTouch((touch: TouchEvent) => {
              //这里不调用子组件的touch.stopPropagation
              // touch.stopPropagation()
            })
        }
        .onTouch((touch: TouchEvent) => {
          OfficialTouchPage.idNumber++
          this.message = '点击了父组件'+OfficialTouchPage.idNumber
        })

      }
      .width('100%')
    }
    .height('100%')
  }
}

如上代码 ,我在statck组件添加了touch事件,并且在子组件Text('这是最上边的')也添加了touch事件,并且touch中不调用touch.stopPropagation()。这样我在点击这个Text的时候,子组件与父组件的touch事件都会响应,也就是我可以成功修改this.message.

如果打开touch.stopPropagation(),那么我在点击Text的时候,就不会触发父组件Stack的touch事件。

另外,官网的这个解释(阻塞事件冒泡)真的让人有点摸不到头脑,汉语真有意思~~

文章来源:https://blog.csdn.net/Lu_Ca/article/details/135391430
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。