Vue 2.5+TypeScript中如何获取mousedown事件的Event对象？

在Vue 2.5的模板里，要在传递自定义参数的同时获取原生Event对象，必须显式通过$event把事件对象传入函数，否则Vue不会自动将Event作为参数传递。

正确的模板写法 #

将$event作为指定参数传入事件处理函数：

<td 
  v-for="(day, idx) in days" 
  :key="idx"
  @mousedown="mouseDown($event, day.index, hour, temperature_mode)"
>
  <!-- 组件内容 -->
</td>

对应的TypeScript函数写法 #

按照模板传入的参数顺序定义函数，第一个参数指定为Event类型：

methods: {
  mouseDown(event: Event, dayIndex: number, hour: string | number, tempMode: string): void {
    // 正常访问事件对象，比如阻止默认行为、获取触发元素等
    console.log('事件对象:', event);
    console.log('day.index:', dayIndex);
    console.log('hour:', hour);
    console.log('temperature_mode:', tempMode);
  }
}

之前写法出错的原因 #

• 若模板里未传入$event，直接调用mouseDown(day.index, hour, temperature_mode)，函数里的第一个参数（无论定义为Event还是any）都会接收day.index的值——因为Vue只会按你传入的自定义参数顺序传递。
• 把Event参数移到末尾但模板未传入对应$event，该参数会是undefined，因为没有传入任何值。

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