通过 responseRegion 设置的多个触摸热区本身无法直接绑定不同事件，但可以通过触摸位置判断结合手势/触摸事件，实现不同热区触发不同逻辑

// xxx.ets
@Entry
@Component
struct TouchTargetExample {
  @State text: string = "";

  build() {
    Column({ space: 20 }) {
      Text("{x:0,y:0,width:'50%',height:'100%'}")
      // 热区宽度为按钮的一半，点击右侧无响应
      Button("button1")
        .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })
        .onClick(() => {
          this.text = 'button1 clicked'
        })

      // 为一个组件添加多个热区
      Text("[{x:'100%',y:0,width:'50%',height:'100%'}," +
      "\n{ x: 0, y: 0, width: '50%', height: '100%' }]")
      Button("button2")
        .responseRegion([
          { x: '100%', y: 0, width: '50%', height: '100%' }, // 第一个热区宽度为按钮的一半，点击按钮右侧宽度一半区域，点击事件生效
          { x: 0, y: 0, width: '50%', height: '100%' } // 第二个热区宽度为按钮的一半，点击button2左半边，点击事件生效
        ])
        .onClick(() => {
          this.text = 'button2 clicked'
        })
      // 热区大小为整个按钮，且下移一个按钮高度，点击button3下方按钮大小区域，点击事件生效
      Text("{x:0,y:'100%',width:'100%',height:'100%'}")
      Button("button3")
        .responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' })
        .onClick(() => {
          this.text = 'button3 clicked'
        })

      Text(this.text).margin({ top: 50 })
    }.width('100%').margin({ top: 10 })
  }
}

参考地址

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-touch-target

你好楼主，支持通过 responseRegion 设置单个或多个矩形热区，即使设置多个热区，组件仍作为整体响应事件，无法区分具体触发的是哪个热区，当多个热区重叠时，仅触发最上层热区对应的事件。

要实现不同热区响应独立事件，可以试试下面的方式：

**1/ 组件拆分法—**利用透明背景组件模拟分区域响应

// 通过多个透明组件叠加实现独立热区

Stack() {

  Button()

    .responseRegion({x:0, y:0, width:'50%', height:'100%'})

    .onClick(() => { /* 左半区事件 */ })

  Button()

    .responseRegion({x:'50%', y:0, width:'50%', height:'100%'})

    .onClick(() => { /* 右半区事件 */ })

}

2/ 坐标判断法–通过触摸坐标手动划分响应区域

@State touchX: number = 0;

@State touchY: number = 0;

Button('分区按钮')

  .onTouch((event: TouchEvent) => {

    this.touchX = event.touches.x;

    this.touchY = event.touches.y;

    // 根据坐标判断触发区域

  })

方案 1：拆分多个子组件

// 示例：拆分两个热区组件
Row() {
  // 热区1组件
  Button()
    .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })
    .onClick(() => { /* 事件1 */ })
  
  // 热区2组件
  Button()
    .responseRegion({ x: '50%', y: 0, width: '50%', height: '100%' })
    .onClick(() => { /* 事件2 */ })
}

方案 2：结合触摸事件坐标判断使用 onTouch事件获取触摸坐标，判断落在哪个热区

@Entry
@Component
struct TouchRegionExample {
  private hotAreas: Rectangle[] = [
    { x: 0, y: 0, width: '50%', height: '100%' }, // 区域1
    { x: '50%', y: 0, width: '50%', height: '100%' } // 区域2
  ];

  build() {
    Column()
      .responseRegion(this.hotAreas)
      .onTouch((event: TouchEvent) => {
        const touchX = event.touches.x;
        const touchY = event.touches.y;
        // 遍历热区判断坐标
        this.hotAreas.forEach((area, index) => {
          if (this.isInRegion(touchX, touchY, area)) {
            console.log(`触发区域${index + 1}事件`);
          }
        });
      })
  }

  // 判断坐标是否在热区内
  private isInRegion(x: number, y: number, area: Rectangle): boolean {
    // 实现坐标判断逻辑（需根据实际布局转换单位）
    return true;
  }
}