Touchstart事件处理函数中event返回undefined的原因排查

问题根因 #

你当前的绑定写法存在语法问题：

@touchstart="touchStart(event)"

touchStart(event) {
  console.log(event);
  console.log("touch start");
}

在Vue的模板事件绑定逻辑里，括号内的变量会从当前模板渲染作用域中查找，框架没有提供名为event的默认内置变量，你传入的event属于未声明的空值，最终传到方法里就是undefined。

正确写法 #

两种合规写法可按需选择：

• 不需要传自定义参数时，直接绑定方法名，省略括号：
  Vue会自动将原生事件对象作为第一个参数传入回调，写法如下：

  <!-- 模板绑定 -->
  @touchstart="touchStart"
  
  // 回调逻辑
  touchStart(event) {
    console.log(event); // 可正常拿到TouchEvent实例
    console.log("touch start");
  }
  

• 需要同时传入自定义参数和事件对象时，使用框架内置的$event变量指代原生事件：

  <!-- 模板绑定，举例同时传自定义的项id -->
  @touchstart="touchStart($event, itemId)"
  
  // 回调逻辑
  touchStart(event, itemId) {
    console.log(event); // 可正常拿到TouchEvent实例
    console.log(itemId); // 可正常拿到传入的自定义参数
    console.log("touch start");
  }
  

注意：该规则对Vue中所有原生事件、自定义事件的绑定都生效，不是touchstart事件独有的问题。

内容的提问来源于stack exchange，提问作者Salil Rajkarnikar