触摸事件获取不到e.offset属性解决办法

高级API调用攻城狮

已于 2022-04-02 14:52:42 修改

阅读量1.3k

点赞数 1

分类专栏：前端文章标签：前端

于 2022-03-30 18:03:38 首次发布

本文链接：https://blog.youkuaiyun.com/PIOnly/article/details/123852768

版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在触摸屏设备上处理触摸事件时计算触摸点相对于元素的位置的方法。由于某些属性如offsetX和clientLeft在触摸事件中可能无法直接获取，文章提供了一种使用pageX和pageY配合getBoundingClientRect()来替代的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码

<img ref="pointBox" @touchStart="_touchStart($event)">

JS代码

        触摸屏时获取不到e.offsetX属性以及元素的clientLeft 或 scrollLeft的值
        所以改用pageX(表示触摸点相对于网页左上角的水平位置)减去getBoundingClientRect().left(获取图片元素相对于视窗左上角的水平位置)的值代替
        offsetY同理

_touchStart(e) {
    let imgTop = this.$refs['pointBox'].getBoundingClientRect().top;
    let imgLeft = this.$refs['pointBox'].getBoundingClientRect().left;
    let offsetX = e.changedTouches[0].pageX - imgLeft;
    let offsetY = e.changedTouches[0].pageY - imgTop;
}