uni-app TouchEvent类型数据类型错误

uni-app TouchEvent类型数据类型错误

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.62

手机系统：Android

手机系统版本号：Android 15

手机厂商：华为

手机机型：nave

页面类型：vue

vue版本：vue3

打包方式：云端

操作步骤：

<canvas @touchstart=“handleTouchStart” @touchend=“handleTouchEnd”
</canvas> function handleTouchStart(e: TouchEvent) { touchStartX.value = e.touches[0].x; touchStartY.value = e.touches[0].y; }


预期结果：

类型错误导致ts警告

实际结果：

正常


bug描述：

touchstart事件的参数e的类型TouchEvent 有问题接口是 这个里面的Touch类型没有xy，但是打印出来是xy
interface Touch {
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/clientX" target="_blank">MDN Reference</a> */
readonly clientX: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/clientY" target="_blank">MDN Reference</a> */
readonly clientY: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/force" target="_blank">MDN Reference</a> */
readonly force: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/identifier" target="_blank">MDN Reference</a> */
readonly identifier: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/pageX" target="_blank">MDN Reference</a> */
readonly pageX: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/pageY" target="_blank">MDN Reference</a> */
readonly pageY: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/radiusX" target="_blank">MDN Reference</a> */
readonly radiusX: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/radiusY" target="_blank">MDN Reference</a> */
readonly radiusY: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/rotationAngle" target="_blank">MDN Reference</a> */
readonly rotationAngle: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/screenX" target="_blank">MDN Reference</a> */
readonly screenX: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/screenY" target="_blank">MDN Reference</a> */
readonly screenY: number;
/* <a href="https://developer.mozilla.org/docs/Web/API/Touch/target" target="_blank">MDN Reference</a> */
readonly target: EventTarget;
}
实际打印"touches": {
"0": {
"y": 400.66668701171875,
"x": 293.66668701171875
}
}

更多关于uni-app TouchEvent类型数据类型错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

代码里面有函数会将触摸点的视口坐标转换为相对于目标元素的坐标，会往上面添加x和y两个属性。

更多关于uni-app TouchEvent类型数据类型错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个关于uni-app中TouchEvent类型与实际数据不一致的问题。在标准Web API中，Touch对象确实不包含x/y属性，而是使用clientX/clientY或pageX/pageY等属性。

解决方案：

  1. 在uni-app中，框架对原生TouchEvent做了封装处理，实际运行时确实会提供x/y属性，这是框架的扩展特性。

  2. 要解决TS类型警告，可以自定义类型声明：

interface UniTouch {
  x: number;
  y: number;
  // 其他标准属性
  clientX: number;
  clientY: number;
  // ...
}

interface UniTouchEvent {
  touches: UniTouch[];
  // 其他事件属性
}

function handleTouchStart(e: UniTouchEvent) {
  touchStartX.value = e.touches[0].x;
  touchStartY.value = e.touches[0].y;
}
  1. 或者直接使用类型断言：
function handleTouchStart(e: any) {
  touchStartX.value = (e.touches[0] as {x: number, y: number}).x;
  // ...
}
回到顶部