觸摸事件

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

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 7開始支持。后續(xù)版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

事件

名稱	是否冒泡	功能描述
onTouch(event: (event?: TouchEvent) => void)	是	手指觸摸動作觸發(fā)該回調，event返回值見[TouchEvent]介紹。

TouchEvent對象說明

名稱	類型	描述
type	[TouchType]	觸摸事件的類型。
touches	Array<[TouchObject]>	全部手指信息。
changedTouches	Array<[TouchObject]>	當前發(fā)生變化的手指信息。
stopPropagation	() => void	阻塞事件冒泡。
timestamp8+	number	事件時間戳，觸發(fā)事件時距離系統(tǒng)啟動的時間間隔。例如，當系統(tǒng)啟動時間為2023/10/12 11:33, 在2023/10/12 11:34時觸發(fā)觸摸事件，時間戳返回的值為60,000,000,000ns。單位：納秒
target8+	[EventTarget]	觸發(fā)事件的元素對象顯示區(qū)域。
source8+	[SourceType]	事件輸入設備。
getHistoricalPoints10+	Array<[HistoricalPoint]>	獲取當前幀所有的歷史點。不同設備每幀的觸摸事件頻率不同，當前幀所有的觸摸事件被稱為歷史點。

TouchObject對象說明

名稱	類型	描述
type	[TouchType]	觸摸事件的類型。
id	number	手指唯一標識符。
x	number	觸摸點相對于被觸摸元素左上角的X坐標。
y	number	觸摸點相對于被觸摸元素左上角的Y坐標。
windowX10+	number	觸摸點相對于應用窗口左上角的X坐標。
windowY10+	number	觸摸點相對于應用窗口左上角的Y坐標。
displayX10+	number	觸摸點相對于應用屏幕左上角的X坐標。
displayY10+	number	觸摸點相對于應用屏幕左上角的Y坐標。

HistoricalPoint10+對象說明

搜狗高速瀏覽器截圖20240326151344.png

名稱	類型	描述`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`
touchObject	[TouchObject]	歷史點對應觸摸事件的基礎信息。
size	number	歷史點對應觸摸事件的手指與屏幕的觸摸區(qū)域大小。默認值：0
force	number	歷史點對應觸摸事件的壓力大小。默認值：0 取值范圍：[0,1]，壓力越大值越大。此接口根據(jù)硬件設備不同，支持情況不同。當前只支持Tablet。
timestamp	number	歷史點對應觸摸事件的時間戳。觸發(fā)事件時距離系統(tǒng)啟動的時間間隔。單位：毫秒

示例

// 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){
            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){
            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)
  }
}