React移动端触摸点偏移实现：修改pageY只读属性报错的解决方案

嘿，刚接触React遇到这个问题很正常，我来帮你理清楚咋解决！

首先为啥会报错？因为浏览器提供的Touch对象是只读的，你没法直接给它的pageY属性赋值，这就是那个Uncaught TypeError的根源。那该咋实现你要的“把触摸点识别为稍靠上250单位”的需求呢？给你两种靠谱的方案：

方案一：使用时计算偏移（推荐） #

不用去修改原始的触摸事件对象，而是在你需要用到坐标值的地方，直接计算偏移后的结果就行。这样不会破坏原生事件的完整性，也没副作用。

比如你要把偏移后的坐标用来更新状态或者定位元素：

onTouchStart = {(event) => {
  // 计算靠上250单位的坐标：pageY越小越靠上，所以用原始值减250
  const adjustedPageY = event.touches[0].pageY - 250;
  // 这里用adjustedPageY做你需要的操作，比如存到状态里
  this.setState({
    touchX: event.touches[0].pageX,
    touchY: adjustedPageY
  });
}}

方案二：创建自定义触摸对象副本 #

如果你的场景必须要传递一个类似Touch的对象给其他函数，可以把原生触摸对象的属性复制到一个新对象里，再修改需要的字段：

onTouchStart = {(event) => {
  // 复制原生Touch对象的所有属性到新对象
  const customTouch = { ...event.touches[0] };
  // 修改pageY为偏移后的值
  customTouch.pageY = customTouch.pageY - 250;
  // 把这个自定义对象传给你的处理函数
  this.handleCustomTouch(customTouch);
}}

小提醒 #

尽量别去修改原生的事件对象，因为浏览器会复用这些对象，修改后可能会影响其他依赖这个事件的组件或逻辑，方案一才是更稳妥的选择哦。

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