uni-app @touchstart事件参数类型变为globalThis.TouchEvent 但该类型缺少offsetLeft属性

uni-app @touchstart事件参数类型变为globalThis.TouchEvent 但该类型缺少offsetLeft属性

示例代码：

<template>  
<canvas  
                id="percent"  
                canvas-id="percent"  
                type="2d"  
                [@touchstart](/user/touchstart)="showBubble($event)"  
                @touchend="hideBubble"  
/>  
</template>  

<script setup lang="ts">  
async function showBubble(e: globalThis.TouchEvent) {  
  console.log(e.currentTarget.offsetLeft)  
}  
</script>

操作步骤：

按下述代码，即可看到编辑器报错

<template>  
<canvas  
                id="percent"  
                canvas-id="percent"  
                type="2d"  
                [@touchstart](/user/touchstart)="showBubble($event)"  
                @touchend="hideBubble"  
/>  
</template>  

<script setup lang="ts">  
async function showBubble(e: globalThis.TouchEvent) {  
  console.log(e.currentTarget.offsetLeft)  
}  
</script>

预期结果：

预期就算换成globalThis.TouchEvent，也不应该报Property 'offsetLeft' does not exist on type 'EventTarget'.

实际结果：

实际报错

bug描述：

uniapp现在的[@touchstart](/user/touchstart)事件的参数类型不是TouchEvent，而是变成了globalThis.TouchEvent

但是globalThis.TouchEvent没有currentTarget.offsetTop属性

本来想上传本地图片，但是按照说明‘上传成功后，在编辑器中选择要插入的位置，然后点击附件预览图旁边的“插入”’，点插入没有任何反应。然后想点预览模式看看，结果控制台报错Uncaught TypeError: textarea.getAttribute is not a function。

信息项 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 Windows 11 专业版 23H2
第三方开发者工具 微信开发者工具 Stable 1.06.2401020
基础库版本 2.32.2
项目创建方式 CLI
CLI版本 4.13.2024042321-alpha

更多关于uni-app @touchstart事件参数类型变为globalThis.TouchEvent 但该类型缺少offsetLeft属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

好吧上传后看到有图片了，但是编辑的时候点插入图片，没有看到有插入图片的markdown，之前是有的
那我在这再补个使用globalThis.TouchEvent类型后，报错的图片

更多关于uni-app @touchstart事件参数类型变为globalThis.TouchEvent 但该类型缺少offsetLeft属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，@touchstart 事件的参数类型是 globalThis.TouchEvent，而 TouchEvent 类型本身并不包含 offsetLeft 属性。这是因为 TouchEvent 是标准 DOM 事件，而 offsetLeft 是 HTMLElement 的属性，用于获取元素相对于其 offsetParent 元素的左边缘的距离。

如果你需要获取触摸事件的目标元素的 offsetLeft，你可以通过 event.target 来访问目标元素，然后获取 offsetLeft 属性。以下是一个示例：

<template>
  <view @touchstart="handleTouchStart">
    Touch me
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchStart(event) {
      // 获取触摸事件的目标元素
      const targetElement = event.target;

      // 获取目标元素的 offsetLeft
      const offsetLeft = targetElement.offsetLeft;

      console.log('offsetLeft:', offsetLeft);
    }
  }
}
</script>

注意事项

  1. 类型断言：在某些情况下，event.target 可能被推断为 EventTarget 类型，而不是 HTMLElement。你可以使用类型断言来明确指定类型：

    const targetElement = event.target as HTMLElement;
const offsetLeft = targetElement.offsetLeft;
回到顶部