在touchstart中如果有event.preventDefault()方法, 将不会触发click事件,这个问题怎么解决

来源:2-5 【讨论题】你所知道的常用设计模式有哪些?

花花公子2016

2021-04-09

如题

写回答

2回答

花花公子2016

提问者

2021-04-12

<template>

  <ul class="list">

    <li

      class="item"

      v-for="item of letters"

      :key="item"

      :ref="item"

      @touchstart.prevent="handleTouchStart"

      @touchmove="handleTouchMove"

      @touchend="handleTouchEnd"

      @click="handleLetterClick"

    >

      {{item}}

    </li>

  </ul>

</template>


<script>

export default {

  name: 'CityAlphabet',

  props: {

    cities: Object

  },

  computed: {

    letters () {

      const letters = []

      for (let i in this.cities) {

        letters.push(i)

      }

      return letters

    }

  },

  data () {

    return {

      touchStatus: false,

      startY: 0,

      timer: null

    }

  },

  updated () {

    this.startY = this.$refs['A'][0].offsetTop

  },

  methods: {

    handleLetterClick (e) {

      this.$emit('change', e.target.innerText)

    },

    handleTouchStart () {

      this.touchStatus = true

    },

    handleTouchMove (e) {

      if (this.touchStatus) {

        if (this.timer) {

          clearTimeout(this.timer)

        }

        this.timer = setTimeout(() => {

          const touchY = e.touches[0].clientY - 79

          const index = Math.floor((touchY - this.startY) / 20)

          if (index >= 0 && index < this.letters.length) {

            this.$emit('change', this.letters[index])

          }

        }, 8)

      }

    },

    handleTouchEnd () {

      this.touchStatus = false

    }

  }

}

</script>


<style scoped>

  @import '~styles/varibles.styl'

  .list

    display: flex

    flex-direction: column

    justify-content: center

    position: absolute

    top: 1.58rem

    right: 0

    bottom: 0

    width: .4rem

    .item

      line-height: .4rem

      text-align: center

      color: $bgColor

</style>


0
0

Dell

2021-04-10

为什么要阻止touchstart 却又要用 click ?

0
4
Dell
回复
花花公子2016
同学你继续往下听,这块我后面应该有处理
2021-04-12
共4条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程