OpenHarmony开发者论坛

标题: 当父组件绑定了onTouch，其子组件Button绑定了onClick，如何做到点击Button只响应Button的onClick，而不用响应父组件的onTouch？ [打印本页]
作者: 清风明月    时间: 2023-8-31 09:32
标题: 当父组件绑定了onTouch，其子组件Button绑定了onClick，如何做到点击Button只响应Button的onClick，而不用响应父组件的onTouch？
[md]【问题描述】

当父组件绑定了onTouch，其子组件Button绑定了onClick，如何做到点击Button只响应Button的onClick，而不用响应父组件的onTouch？

子组件：

```@Component
struct Item{
build() {
Row() {
Button("点击我")
.width(100)
.width(100)
.backgroundColor('#f00')
.onClick(()=>{
console.log("Button onClick")
})
}
}
}
```

父组件：

```List(){
ForEach(this.List, (item)=>{
ListItem(){
Item()
}
.width('100%')
.padding(10)
.onTouch((e)=>{
console.info('Button onTouch')
})
})
}
```

运行结果：

![1693382883979.jpg](data/attachment/forum/202308/30/160808s2ymzkzckjkcj552.jpg "1693382883979.jpg")
[/md]
作者: 努力写bug    时间: 2023-8-31 16:36
可以在Button组件中绑定onTouch，并在onTouch中使用stopPropagation()阻止onTouch冒泡传递到父组件阻止冒泡传递。
  1. build() {
  2.   Row() {
  3.     Button("点击我")
  4.       .width(100)
  5.       .width(100)
  6.       .backgroundColor('#f00')
  7.       .onClick(()=>{
  8.         console.log("Button onClick")
  9.       })
  10.       .onTouch((e) => {
  11.         console.log("Button onTouch")
  12.         e.stopPropagation()
  13.       })
  14.   }
  15.   .onTouch(() => {
  16.     console.log("Row onTouch")
  17.   })
  18. }
复制代码




欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5