1. Introduction to touch event

• touchstart event: triggered when a finger touches the screen, even if a finger is already on the screen;
• touchmove event: triggered continuously when a finger slides on the screen. During this event, calling the preventDefault() event can prevent scrolling;
• touchend event: occurs when the user removes his finger from the element.
• touchcancel event: occurs when the touch event is interrupted. Different devices will interrupt the touch event in different actions. If this "error" occurs, it is considered a good habit to include this event to clean up the code.

After each touch event is triggered, an event object will be generated. The event object additionally includes the following three touch lists

For example, distinguish these three attributes in touch events:

1. Touch the screen with a finger to trigger an event. At this time, these three attributes have the same value.
2. Touch the screen with your second finger. At this time, touches There are two elements, and each finger touch point is a value.
   When two fingers touch the same element, targetTouches and touches The values are the same, otherwise targetTouches There is only one value.
   changedTouches At this time, there is only one value, which is the touch point of the second finger, because the second finger is the cause of the event.
3. Touch the screen with two fingers at the same time changedTouches There are two values, and each finger's touch point has a value
4. When the finger slides, all three values change
5. One finger off the screen, touches and targetTouches The corresponding elements in are removed at the same time, and changedTouches There will still be elements.
6. After all your fingers leave the screen, touches and targetTouches There will be no more values, changedTouches There will also be a value,
   This value is the contact point of the last finger to leave the screen.

Each touch in the touch list consists of touch objects (including touch information). The main attributes are as follows:

2. Simple case of using touch event in Vue

effect:

Full code:

<template>
  <div class="test">
    <div class="wrap">
      Background area
      <div class="animate__animated animate__zoomIn insert" v-if="showDeviceImg">insert draw</div>
    </div>
    <div class="drawer" ref="drawer">Touch the sliding area</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDeviceImg:false,
      startY: 0,
      endY:0,
    };
  },
  methods: {
    handleTounchListener() {
      this.$refs.drawer.addEventListener('touchstart', (event) => {
        // Get the initial Y coordinate of the touch
        console.log(event)
        this.startY = event.targetTouches[0].pageY;
      })
      this.$refs.drawer.addEventListener('touchmove', (event) => {
        // If there are two contact points, return
        if (event.targetTouches.length > 1){ return }

        this.endY = event.targetTouches[0].pageY;
        const distance = this.endY - this.startY; // Calculate the vertical coordinate difference between the start and end positions
        if(distance > 60){
          // Slide down
          this.showDeviceImg = true;
        }else if(distance < -60){
          // wipe up
          this.showDeviceImg = false;
        }
        event.preventDefault(); // Block default scrolling
      })
      this.$refs.drawer.addEventListener('touchend', (event) => {
        console.log('touchEnd',event.targetTouches)
      })
      this.$refs.drawer.addEventListener('touchcancel', (event) => {
        console.log('touchCancel', event)
      })
    },
  },
  mounted() {
    this.handleTounchListener()
  },
};
</script>

<style lang="stylus" scoped>
.test {
  font-size: 25px;
  text-align: center;
  .wrap{
    width: 100%;
    min-height: 10vh;
    background-color: red;
    .insert{
      width: 100%;
      height: 30vh;
      background-color: green;
    }
  }
  .drawer{
    width: 100%;
    height: 100vh;
    background-color: pink;
  }
}
</style>