在Vue.js中如何解决preventDefault无效、定时器重复触发问题

现有代码问题排查 #

• 条件判断逻辑颠倒：你的拦截条件self.hour !== 0 && self.min !== 0 && self.sec !== 0只有在时分秒全不为0时才会触发拦截，和你要的「时分秒不全为0就拦截」的需求完全相反
• preventDefault()使用错误：该方法是事件对象的原生方法，需要接收事件参数才能调用，且它仅用于阻止标签默认行为（如a标签跳转、表单提交），无法阻止定时器重复创建
• 缺少定时器状态判断：即使时分秒全为0，如果已经有定时器在运行，重复点击还是会创建多个定时器，最终导致秒数加速跳转

修正方案 #

1. 补全data定义

首先补全你遗漏的totalSeconds字段，同时新增interval字段存储定时器实例：

data: () => {
  return {
    hour: 0,
    min: 0,
    sec: 0,
    totalSeconds: 0,
    interval: null // 存储定时器实例，初始为null
  }
}

2. 修正startTimer方法逻辑

调整判断条件，存在运行中的定时器或者时分秒不全为0时直接返回，不创建新定时器：

methods: {
  startTimer: function () {
    // 已存在定时器 或 时分秒不全为0时直接拦截
    if (this.interval || !(this.hour === 0 && this.min === 0 && this.sec === 0)) {
      return
    }
    // 仅满足条件时创建新定时器
    this.interval = setInterval(() => {
      this.totalSeconds += 1
      this.hour = Math.floor(this.totalSeconds / 3600)
      this.min = Math.floor((this.totalSeconds / 60) % 60)
      this.sec = this.totalSeconds % 60
    }, 1000)
  },
  // 建议补充停止定时器方法，组件销毁时调用避免内存泄漏
  stopTimer: function() {
    if (this.interval) {
      clearInterval(this.interval)
      this.interval = null
    }
  }
}

3. （可选）添加按钮禁用状态

如果需要更直观的交互效果，可以给触发元素加动态禁用样式：

<div 
  @click="startTimer()" 
  :class="{ disabled: interval || !(hour === 0 && min === 0 && sec === 0) }"
>
  add timer
</div>

<style>
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* 直接阻止点击事件触发，无需额外判断 */
}
</style>

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