Vue 移動端的長按與觸摸事件

Vue 移動端的長按與觸摸事件

博客說明

文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！

說明

在手機端的需求難免會遇到與手勢相關的，比如div的長按和單擊事件，長按可能是分享或者刪除等操作，一般的形式是通過彈窗來展現。

實現

其實主要是利用dom的觸摸事件，touchstart，touchmove，touchend

代碼

<template>
  <div>
    <div class="btn-long" @touchstart="handlerTouchstart" @touchmove="handlerTouchmove" @touchend="handlerTouchend">長按我</div>
    <div v-if="clickShow">單擊</div>
    <div v-if="longClickShow">雙擊</div>
  </div>
</template>

<script>

export default {
  name: 'LongTouch',
  data () {
    return {
      // 定時器
      loop: 0,
      clickShow: false,
      longClickShow: false
    }
  },
  methods: {
    handlerTouchstart () {
      this.loop = setTimeout(() => {
        this.loop = 0
        // 執行長按要執行的內容
        this.clickShow = false
        this.longClickShow = true
      }, 500) // 定時的時間
      return false
    },
    handlerTouchmove () {
      // 清除定時器
      clearTimeout(this.loop)
      this.loop = 0
    },
    handlerTouchend () {
      // 清除定時器
      clearTimeout(this.loop)
      if (this.loop !== 0) {
        // 單擊操作
        this.clickShow = true
        this.longClickShow = false
      }
    }
  }
}
</script>

<style scoped>

.btn-long {
  width: 200px;
  height: 30px;
  background-color: red;
}
</style>

演示

發現在長按時，會出現選中文字的效果，這比較影響體驗。

優化體驗

在css中加入樣式，這樣就不會出現選中的效果了。

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

感謝

萬能的網絡

以及勤勞的自己，個人博客，GitHub測試，GitHub

公眾號-歸子莫，小程序-小歸博客