Vue mobile long press and touch events

The blog instructions

The information involved in the article comes from the Internet and personal summary, meaning lies in personal learning and experience summary, if there is any infringement, please contact me to delete, thank you!

instructions

On the mobile side, it is inevitable to encounter gesture-related requirements, such as long press and click events of div. Long press may be operations such as sharing or deletion, which are generally displayed through pop-ups.

implementation

It’s basically the DOM touch events, TouchStart, Touchmove, touchEnd

code

<template> <div> <div class="btn-long" @touchstart="handlerTouchstart" @touchmove="handlerTouchmove" @touchend="handlerTouchend"> </div> <div v-if="clickShow"> </template> <script> export default {name: 'LongTouch', data () {return {loop: 0, clickShow: false, longClickShow: false } }, methods: {handlerTouchstart () {this.loop = setTimeout(() => {this.loop = 0 // Click to execute the content this.clickShow = false This.longclickshow = true}, 500) HandlerTouchmove () {// Clear timer clearTimeout(this.loop) this.loop = 0}, HandlerTouchend () {clearTimeout(this.loop) if (this.loop! LongClickShow = false}}}} </script> <style scoped>.btn-long {width: 200px; height: 30px; background-color: red; } </style>Copy the code

demo

It is found that in a long time, there will be the effect of selected text, which affects the experience.

Optimize the experience

Add a style to your CSS so that the selected effect does not appear.

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

Thank you

Universal network

And hardworking self, personal blog, GitHub test, GitHub

Public number – to zi mo, small program – small blog

Vue mobile long press and touch events