vue移动端H5页面点击事件在部分安卓手机上失灵

之前开发了一个H5页面，模仿爱奇艺视频APP的我的频道，点击当前频道进行移除或者添加，开始使用的是@click事件，但是上线以后发现部分安卓手机比如荣耀系列的，点击屏幕上的按钮，事件触发不灵光，点好多次才触发一次。后来换成@touchend，完美解决这个问题，而且很丝滑。

@touchend和@click的区别在于它们触发的时间和方式不同。

@click是在用户用手指点击屏幕的时候触发的。在移动端设备上，由于移动设备的屏幕尺寸较小，点击屏幕上的元素会更加精准，因此@click事件被广泛使用。

@touchend则是在用户触摸屏幕结束时（即放开手指）触发的。与@click相比，@touchend的触发时间更晚一些。在一些场景下，为了提高用户体验，开发者会选择使用@touchend事件来代替@click事件，例如在移动端设备上进行滑动操作时，@touchend可以更好地处理滑动过程中的各种交互效果。

总之，@click和@touchend虽然都是用户与屏幕交互事件，但它们触发的时间和方式有所不同，开发者可以根据具体的需求来选择使用。
@touchend是在用户结束触摸屏幕（即放开手指）时触发的事件。在Vue中，你可以利用这个事件来实现一些功能，例如隐藏弹框。

例如，你可以在包含弹框的元素上添加@touchend事件监听器，当用户结束触摸时，该事件监听器会被触发，然后你可以在事件处理函数中隐藏弹框。

这里有一个简单的例子：

<template>
  <view @touchend="hidePopup">
    <!-- 其他内容 -->
    <viewclass="popup" v-show="isPopupVisible">
      <!-- 弹框内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPopupVisible: true,
    };
  },
  methods: {
    hidePopup() {
      this.isPopupVisible = false;
    },
  },
};
</script>

在这个例子中，当用户在包含弹框的元素上结束触摸时，hidePopup方法会被调用，然后将isPopupVisible设置为false，使弹框隐藏。

当然有@touchend就有@touchstart，只不过它的触发时间刚好是触摸手机屏幕的时刻。

@touchstart事件是在用户与元素接触时触发的手指触摸屏幕事件。这个事件仅适用于带有触摸屏的设备。当用户将手指放在屏幕上时，就会触发@touchstart事件。这个事件可以用于实现一些触摸屏上的特殊效果，例如在用户触摸屏幕时进行定位或者缩放等操作。

在Vue中，你可以在需要监听触摸事件的元素上添加@touchstart事件监听器，然后在事件处理函数中编写相应的逻辑代码。例如：

<template>
  <div @touchstart="handleTouchStart">
    <!-- 触摸事件绑定的元素 -->
    <button>Touch me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleTouchStart(event) {
      // 处理触摸事件的逻辑
      console.log('Touch started!');
    }
  }
}
</script>

在这个例子中，当用户在按钮上触摸屏幕时，@touchstart事件会被触发，然后调用handleTouchStart方法来处理触摸事件的逻辑。