Ionic 3移动端HTML元素touchstart与touchend事件处理器需求问询

嘿，我之前在Ionic 3项目里也遇到过这个需求——需要监听触摸的开始和结束时刻，而不是只依赖Ionic自带的那些手势回调。下面给你两个实用的解决方案：

方案1：直接使用原生Web触摸事件 #

Ionic 3的底层还是基于WebView运行的，所以你可以直接在HTML元素上绑定原生的touchstart和touchend事件，完全不需要依赖Ionic自带的手势组件。

模板代码： #

<!-- 在任意Ionic元素或普通HTML元素上绑定事件 -->
<ion-card (touchstart)="handleTouchStart($event)" (touchend)="handleTouchEnd($event)">
  <ion-card-content>
    点我测试触摸开始/结束事件
  </ion-card-content>
</ion-card>

组件类代码： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-touch-test',
  templateUrl: './touch-test.page.html',
  styleUrls: ['./touch-test.page.scss'],
})
export class TouchTestPage {

  handleTouchStart(event: TouchEvent) {
    // 触摸开始时的业务逻辑，比如：
    // - 记录触摸起始时间
    // - 改变元素样式（比如高亮）
    // - 启动某个动画
    console.log('触摸已开始', event.touches[0]);
  }

  handleTouchEnd(event: TouchEvent) {
    // 触摸结束时的业务逻辑，比如：
    // - 计算触摸时长
    // - 恢复元素样式
    // - 触发后续操作
    console.log('触摸已结束', event.changedTouches[0]);
  }
}

方案2：基于Hammer.js自定义监听 #

Ionic 3的手势系统本身就是基于Hammer.js封装的，所以你可以直接手动初始化Hammer实例，来监听更底层的触摸事件。这种方式适合需要同时结合Hammer手势（比如tap、press）和触摸起止事件的场景。

组件类代码： #

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import * as Hammer from 'hammerjs';

@Component({
  selector: 'app-touch-test',
  templateUrl: './touch-test.page.html',
  styleUrls: ['./touch-test.page.scss'],
})
export class TouchTestPage implements AfterViewInit {
  // 通过模板引用获取目标元素
  @ViewChild('targetElement') targetElement: ElementRef;

  ngAfterViewInit() {
    // 初始化Hammer实例
    const hammerInstance = new Hammer(this.targetElement.nativeElement);
    
    // 监听触摸开始事件
    hammerInstance.on('touchstart', (event) => {
      console.log('Hammer 触摸开始', event);
    });

    // 监听触摸结束事件
    hammerInstance.on('touchend', (event) => {
      console.log('Hammer 触摸结束', event);
    });

    // 如果你还需要同时监听Ionic自带的手势，比如tap
    hammerInstance.on('tap', (event) => {
      console.log('触发tap手势', event);
    });
  }
}

模板代码： #

<ion-button #targetElement>
  测试Hammer触摸事件
</ion-button>

注意事项： #

• 如果需要阻止浏览器默认行为（比如触摸时页面滚动），可以在touchstart回调里调用event.preventDefault()，但要注意不要影响正常的页面交互。
• 原生触摸事件的event.touches会返回当前所有活跃的触摸点，适合处理多点触摸场景。

内容的提问来源于stack exchange，提问作者gaspar