本文共 1194 字，大约阅读时间需要 3 分钟。

遇到一个问题：在移动设备上，当你点击元素时，touchStart和click事件会依次触发。由于click事件在移动端有300ms延迟，导致touchStart先触发，随后click事件再被触发，这种情况会导致每次操作执行两次毫无意义的代码。此外，PC端无法识别touch相关事件。

为了解决这个问题，可以采取以下两种方式：

（1）使用preventDefault方法

通过在touchstart事件中添加e.preventDefault()，可以阻止click事件的触发。这种方法在Vue框架中可以通过事件修饰符@touchstart.stop.prevent实现。在method中不需要手动添加e.preventDefault()，只需在触发touchStart事件时调用阻止默认行为即可。

示例代码：

   
  
    
    {{ item }}
  
   

methods: {
  handleLetterClick(e) {
    console.log('click事件执行一次');
    this.$emit('change', e.target.innerText);
  },
  handleTouchStart(e) {
    console.log('TouchStart执行一次');
    this.touchStatus = true;
    e.preventDefault(); // 在method中无需手动添加
  }
}

（2）判断浏览器是否支持触屏事件

可以通过检查'ontouchstart' in document来判断浏览器是否支持触屏事件。如果支持touch事件，则调用touchStart事件处理逻辑；如果不支持，直接调用click事件。

示例代码：

   
  
    
    {{ item }}
  
   

methods: {
  handleLetterClick(e) {
    console.log('click事件执行一次');
    this.$emit('change', e.target.innerText);
  },
  handleTouchStart(e) {
    console.log('ontouchstart' in document);
    if ('ontouchstart' in document) {
      this.handleTouchStart(e);
    } else {
      this.handleLetterClick(e);
    }
  },
  handleSelfClick(e) {
    // 可以根据需要添加额外逻辑
  }
}

通过上述方法，可以有效避免在移动设备上触发不必要的click事件，从而优化用户体验。

转载地址：http://cgpiz.baihongyu.com/