Manejar eventos de pulsación prolongada, eventos de clic y conflictos de eventos predeterminados en vue

escrito en frente

El ejemplo es el proyecto h5. Pila de tecnología: vue + vant + nuxt.

Introducción a los puntos de conocimiento:

touchstart: // Se activa cuando se coloca el dedo en la pantalla

touchend: // Se activa cuando el dedo sale de la pantalla

touchmove: // Activado al deslizar el dedo en la pantalla

touchcancel: // Se activa cuando el sistema cancela el evento táctil

Paginas y requisitos:

Función de búsqueda de historial:

Haga clic en un registro histórico y complete el contenido histórico en el cuadro de búsqueda;

Mantenga presionado un registro de historial: eliminar;

código:

html:

<div
  v-for="item in historyList"
  :key="item"
  class="disease-tag"
  @touchstart.prevent="delHistory($event,'deleteItem', item)"
  @touchend.prevent="touchend"
>
  {
   
   { item }}
</div>

datos:

longTouch: false, // 判断是否是长按；

Eventos activados por touchstart:

// 模拟长按
clearTimeout(this.loop)// 再次清空定时器，防止重复注册定时器（会把点击事件也阻止掉）
this.longTouch = false // 关键
this.loop = setTimeout(() => {
  this.longTouch = true  // 关键
  this.showDialog = true
}, 600)

Evento de abandono de la pantalla táctil:

touchend() {
  clearTimeout(this.loop) // 清空定时器，防止重复注册定时器
  if(!this.longTouch){
    //如果不是长按，执行点击事件
    this.change(this.curItem)
  }
},

Por qué escribir así:

Hay eventos de clic y de pulsación larga en el div.

Debido a que vue no tiene su propio evento de pulsación larga, usamos touchstarty touchendsimulamos la pulsación larga, pero después de la pulsación larga, activará el evento predeterminado, como aparece el menú, y aparecerá el terminal móvil para seleccionar copiar;

Pero si bloquea directamente el evento predeterminado, el evento de clic también se bloqueará, ya sea que esté directamente bloqueado o bloqueado @touchstart.preventen el código ;event.preventDefault

Entonces, ¿cómo se puede hacer: evitar el evento predeterminado y activar el evento de clic correctamente?

Usa la función que se activa antes del evento, combinada con un temporizador para resolverlo touchstart.click

Con respecto a esta característica, simplemente podemos imprimir y ver:

Enlace estos tres eventos al mismo tiempo:

 <div 
   v-for="item in historyList"
   :key="item" @click="click"
   @touchstart="touchstart"
   @touchend="touchend"
 </div>

Imprime la secuencia de ejecución:

Haga clic en:

Prensa:

Entonces puede usar touchstart para simular eventos de clic.