How does vue achieve the coexistence of "long press" and "normal click" without affecting each other?

usage scenarios:

in a vue project, there is a button.

problems encountered:

Click the output: 111. (no problem)
long press output: 111222.

want to implement:

Click the output: 111.
long press output only: 222.

how can it be implemented?

methods: {
    handleClick () {
      clearInterval(this.Loop)
      this.Loop = setTimeout(() => {
        console.log("222")
      }, 1000)
      console.log("111")
    },
    clearLoop () {
      clearInterval(this.Loop)
    }
  }
Mar.17,2021

can be compared with the time stamp
touchstart. Record the time when touchend is compared with the current time.
if the time exceeds a certain period of time, it is regarded as a long click, and if it is not exceeded, it is regarded as clicking

.
Menu