HarmonyOS 鸿蒙Next API10里Slider组件点击时，会且仅会响应父组件的点击事件

HarmonyOS 鸿蒙Next API10里Slider组件点击时，会且仅会响应父组件的点击事件

测试页面代码如下：

@Entry
@Component
struct Test {
  private sliderValue: number = 0;

  build() {
    Column() {
      Text('爷组件')
        .margin({bottom: 5})
      Row() {
        Text('父组件')
        Slider({
          value: this.sliderValue,
          min: 0,
          max: 100,
          style: SliderStyle.InSet,
          step: 1,
        })
          .onChange((value: number, mode: SliderChangeMode) => {
            this.sliderValue = value;
            console.log('slider is clicked')
            console.log('mode=', mode, mode === SliderChangeMode.Click);
          })
          .width('80%')
        Text(`${this.sliderValue.toFixed(0)}%`).fontSize(12)
          .padding($r('app.float.ui_6_vp'))
      }
      .padding(10)
      .backgroundColor('#ff7766')
      .onClick(() => {
        console.log('dad Component is clicked');
      })
    }
    .height(120)
    .flexGrow(1)
    .margin({top: 20, left: 10, right: 10})
    .padding(15)
    .backgroundColor('#dddddd')
    .borderRadius(12)
    .onClick(() => {
      console.log('grandfather Component is clicked');
    })
  }
}

给爷组件Column添加click监听，点击slider组件调整进度时：

  • 如果不给父组件Row添加onClick事件监听，则爷组件Column会触发click监听；
  • 如果给父组件Row添加onClick事件监听，则爷组件Column不会触发click监听。

更多关于HarmonyOS 鸿蒙Next API10里Slider组件点击时，会且仅会响应父组件的点击事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我遇到的问题是: 点击Slider的时候,爷组件和父组件的onclick都不会被触发,但是,

  1. 不给父组件点击事件,给爷组件点击事件的时候,点击父组件,会触发爷组件,但是点击slider不会触发爷组件;

  2. 给父组件点击事件,点击slider不会触发父组件的点击事件

@Entry
@Component
struct Test {
  @State sliderValue: number = 0;

  build() {
    Column() {
      Text('爷组件')
        .margin({ bottom: 5 })
      Row() {
        Text('父组件')
        Slider({
          value: this.sliderValue, // 当前进度值
          min: 0, // 设置最小值
          max: 100, // 设置最大值
          style: SliderStyle.InSet, // 设置Slider的滑块与滑轨显示样式。
          step: 1, // 设置Slider滑动步长。
        })
        .width('80%')
        .onChange((value: number, mode: SliderChangeMode) => {
          this.sliderValue = value;
          console.info('tip', value)
          console.info('tip', 'mode=', mode, mode === SliderChangeMode.Moving);
          // Begin  0  手势/鼠标接触或者按下滑块。
          // Moving 1  正在拖动滑块过程中。
          // End    2  手势/鼠标离开滑块。
          // Click  3  点击滑动条使滑块位置移动。
        })

        Text(`${this.sliderValue.toFixed(0)}%`)
          .fontSize(12)
      }
      .padding(10)
      .backgroundColor('#ff7766')
      .onClick(() => {
        console.info('tip', '父组件 is clicked');
      })
    }
    .height(120)
    .margin({ top: 20, left: 10, right: 10 })
    .padding(15)
    .backgroundColor('#dddddd')
    .borderRadius(12)
    .onClick(() => {
      console.info('tip' + '最外层布局 is clicked');
    })
  }
}

更多关于HarmonyOS 鸿蒙Next API10里Slider组件点击时，会且仅会响应父组件的点击事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next API10中，Slider组件的点击事件默认会向上冒泡到其父组件。这意味着当用户点击Slider组件时，不仅Slider自身会处理点击事件，其父组件也会接收到该事件。这种事件冒泡机制是鸿蒙OS事件处理的一部分，确保父组件能够感知到子组件的交互。如果需要阻止事件冒泡，可以在Slider的点击事件处理函数中调用event.stopPropagation()方法，以阻止事件继续向上传递。

回到顶部