HarmonyOS鸿蒙Next中onClick事件如何阻止事件冒泡

HarmonyOS鸿蒙Next中onClick事件如何阻止事件冒泡 再嵌套形式写上的代码中如何实现阻止事件冒泡

@Component
export default struct Play {
  @State message:string = 'like';
  build() {
    Column() {
      Column({space: 10}) {
        Column() {
          Text('like')
          Text('1111')
        }
        .width(50)
        .height(50)
        .borderRadius(25)
        .onClick(() => {
          promptAction.showToast({message: 'on Click like'});
        })

      }

    }.onClick(() => {
      this.message = 'share';
    })
  }
}

点击外部onClick的时候不要里面的like的onClick触发，点击like里面的onClick的时候不要外部的onClick触发。这个如何实现呢


更多关于HarmonyOS鸿蒙Next中onClick事件如何阻止事件冒泡的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

点击外部onClick的时候不要里面的like的onClick触发，点击like里面的onClick的时候不要外部的onClick触发。这个不需要实现，本来就是这个效果，你没实现是因为父子容器一样大，把父容器调大就行

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

@Entry
@Component
export default struct Play {
  @State message: string = 'like';

  build() {
    Column() {
      Column() {
        Text(this.message)
      }
      .width(50)
      .height(50)
      .backgroundColor(Color.Red)
      .borderRadius(25)
      .onClick(() => {
        promptAction.showToast({ message: 'on Click like' });
      })
    }
    .width(150)
    .height(150)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.message = 'share';
    })
  }
}

更多关于HarmonyOS鸿蒙Next中onClick事件如何阻止事件冒泡的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


【背景知识】

onClick：组件被点击时触发的事件。

onTouch：手指在组件上按下、滑动或抬起时触发。

onClick属于系统手势，在默认情况下，这些手势为非冒泡事件，当父组件和子组件绑定同类型的手势时，父子组件绑定的手势事件会发生竞争，子组件会优先识别绑定的手势。因此，除非显式声明允许多个手势同时成功，否则同一时间只会有一个手势响应。

【解决方案】

父子组件同时绑定onClick事件，父组件无法响应，将父组件更改为使用onTouch事件，实现两个组件同时触发事件，并使用标志变量实现业务逻辑：

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

@Entry
@Component
struct Index {
  @State message:string = 'like';
  @State flage: boolean = true
  build() {
    Column() {
      Column({space: 10}) {
        Column() {
          Text(this.message)
          Text('1111')
        }
        .width(50)
        .height(50)
        .borderRadius(25)
        .onClick(() => {
          if(this.flage){
            promptAction.showToast({message: 'on Click like'});
          }
        })
      }
    }.onTouch(() => {
      if(!this.flage){
        this.message = 'share';
      }
    })
  }
}

在子组件中阻止冒泡

若父组件监听了 onTouch 事件，而子组件（如 Button）需要响应 onClick 但阻止父组件的 onTouch 冒泡，可以通过在子组件的 onTouch 事件 中调用 event.stopPropagation() 方法

或者看看这个https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-174

在鸿蒙开发中解决嵌套组件事件冒泡问题，可通过hitTestBehavior属性和事件处理策略实现

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

@Component
export default struct Play {
  @State message:string = 'like';
  
  build() {
    Column() {
      Column({space: 10}) {
        Column() {
          Text('like')
          Text('1111')
        }
        .width(50)
        .height(50)
        .borderRadius(25)
        .hitTestBehavior(HitTestMode.Block) // 关键设置1：阻止子组件事件冒泡
        .onClick(() => {
          promptAction.showToast({message: 'on Click like'});
          // 添加事件处理终止逻辑
          return true; // 关键设置2：阻断事件继续传递
        })
      }
    }
    .hitTestBehavior(HitTestMode.Block) // 关键设置3：父容器设置阻断
    .onClick(() => {
      this.message = 'share';
    })
  }
}

可以试下

.onClick((event) => {
  // 阻止事件冒泡
  event.stopPropagation();
  promptAction.showToast({ message: "xxxx" });
})

试试这个看看，

提示说 onClick((event) => {}) 中的 event 没有这个属性。

换成这个 还不行 就得看看对应api版本 针对性处理
.onClick((event) => {
event.stopImmediatePropagation();
promptAction.showToast({ message: ‘xxxx’ });
})，

在HarmonyOS鸿蒙Next中，阻止onClick事件冒泡需调用事件对象的stopPropagation()方法。

示例代码：

onClick((event: ClickEvent) => {
  event.stopPropagation()
  // 业务逻辑
})

该方法会阻止事件向父组件继续传递。适用于需要隔离点击响应的组件交互场景。

在HarmonyOS Next中，可以通过在onClick事件处理函数中调用事件对象的stopPropagation()方法来阻止事件冒泡。

修改后的代码示例：

@Component
export default struct Play {
  @State message:string = 'like';
  build() {
    Column() {
      Column({space: 10}) {
        Column() {
          Text('like')
          Text('1111')
        }
        .width(50)
        .height(50)
        .borderRadius(25)
        .onClick((event: ClickEvent) => {
          event.stopPropagation(); // 阻止冒泡到父组件
          promptAction.showToast({message: 'on Click like'});
        })
      }
    }
    .onClick((event: ClickEvent) => {
      event.stopPropagation(); // 阻止继续向上冒泡
      this.message = 'share';
    })
  }
}

关键点：

  1. 在onClick回调函数中接收ClickEvent参数
  2. 调用event.stopPropagation()阻止事件向父组件传播
  3. 内层组件先阻止冒泡，外层组件的事件就不会被触发
  4. 外层组件也建议添加stopPropagation()防止继续向上层冒泡

这样就能实现点击内层组件时只触发内层事件，点击外层组件时只触发外层事件的效果。

回到顶部