觸摸事件

2024-01-22 10:49 更新

當(dāng)手指在組件上按下、滑動、抬起時觸發(fā)。

說明

從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

事件

名稱

是否冒泡

功能描述

onTouch(event: (event?: TouchEvent) => void)

手指觸摸動作觸發(fā)該回調(diào),event返回值見TouchEvent介紹。

TouchEvent對象說明

名稱

類型

描述

type

TouchType

觸摸事件的類型。

touches

Array<TouchObject>

全部手指信息。

changedTouches

Array<TouchObject>

當(dāng)前發(fā)生變化的手指信息。

stopPropagation

() => void

阻塞事件冒泡。

timestamp8+

number

事件時間戳。觸發(fā)事件時距離系統(tǒng)啟動的時間間隔,單位納秒。

例如,當(dāng)系統(tǒng)啟動時間為2023/10/12 11:33, 在2023/10/12 11:34時觸發(fā)觸摸事件,時間戳返回的值為60,000,000,000ns。

target8+

EventTarget

觸發(fā)事件的元素對象顯示區(qū)域。

source8+

SourceType

事件輸入設(shè)備。

TouchObject對象說明

名稱

類型

描述

type

TouchType

觸摸事件的類型。

id

number

手指唯一標(biāo)識符。

screenX

number

觸摸點(diǎn)相對于應(yīng)用窗口左上角的X坐標(biāo)。

screenY

number

觸摸點(diǎn)相對于應(yīng)用窗口左上角的Y坐標(biāo)。

x

number

觸摸點(diǎn)相對于被觸摸元素左上角的X坐標(biāo)。

y

number

觸摸點(diǎn)相對于被觸摸元素左上角的Y坐標(biāo)。

示例

// xxx.ets
@Entry
@Component
struct TouchExample {
  @State text: string = ''
  @State eventType: string = ''

  build() {
    Column() {
      Button('Touch').height(40).width(100)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.eventType = 'Down'
          }
          if (event.type === TouchType.Up) {
            this.eventType = 'Up'
          }
          if (event.type === TouchType.Move) {
            this.eventType = 'Move'
          }
          this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
          + event.target.area.width + '\nheight:' + event.target.area.height
        })
      Button('Touch').height(50).width(200).margin(20)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.eventType = 'Down'
          }
          if (event.type === TouchType.Up) {
            this.eventType = 'Up'
          }
          if (event.type === TouchType.Move) {
            this.eventType = 'Move'
          }
          this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
          + event.target.area.width + '\nheight:' + event.target.area.height
        })
      Text(this.text)
    }.width('100%').padding(30)
  }
}
// xxx.ets
@Entry
@Component
struct TouchExample {
  @State text: string = ''
  @State eventType: string = ''

  build() {
    Column() {
      Button('Touch').height(40).width(100)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.eventType = 'Down'
          }
          if (event.type === TouchType.Up) {
            this.eventType = 'Up'
          }
          if (event.type === TouchType.Move) {
            this.eventType = 'Move'
          }
          this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
          + event.target.area.width + '\nheight:' + event.target.area.height
        })
      Button('Touch').height(50).width(200).margin(20)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.eventType = 'Down'
          }
          if (event.type === TouchType.Up) {
            this.eventType = 'Up'
          }
          if (event.type === TouchType.Move) {
            this.eventType = 'Move'
          }
          this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
          + event.target.area.width + '\nheight:' + event.target.area.height
        })
      Text(this.text)
    }.width('100%').padding(30)
  }
}

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號