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

原创已于 2022-04-02 14:52:42 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

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

前端专栏收录该内容

13 篇文章

订阅专栏

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

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;
}