Resolve the conflict between long press and click event

Resolve conflict between long press and click event

Use scenarios

When using vue for mobile development, I encountered the problem of long press events and click events conflicts.

Specific requirements

Select the tag when clicking on the tag, and unselect when clicking again. Because the tag name is too long, press and hold the tag to display the full tag name using tooltip.

Code description

Long pressing is achieved using the touchstart event and the touchend event. Use setTimeout in the touchstart event, and set the time to the time when the long press takes effect. The following code is listed.

HTML part

The .prevent modifier here is used to prevent default actions. But I have tried it here. There will be exceptions when running on the computer without adding it. There will be no impact on the mobile phone. It is best to add it.

    <div v-for="(item, index) in List" class="flex a-center j-center" >
           <van-tag   v-if="!"
           @="goTouch()"  
           @="outTouch(index)"
            >
            <span >{{  }}</span>
            </van-tag>
        
            <van-tag v-if=""   color="blue" 
             @="goTouch()"
             @="outTouch(index)" 
             >
            <span>{{  }}</span>
            </van-tag>
    </div>

JS part

When clicking on the tag, the value of timer is not 0. If you execute a single click event, set the timer to 0 when you press for one second, then only the long press event will be executed. This resolves the conflict between long press and click events.

data(){
 return{
 timer:0
 }
},
methods:{
//touchstart eventgoTouch(v) {
       = setTimeout(() =&gt; {
         = 0
        //Executive long press event      }, 1000);
      return false
 },
 
 //touchend event    outTouch(index) {
      clearTimeout();
      if(!=0){
      //Execute a single click event      }
      return false
 }
}

vue web-side long press event to resolve conflicts with click

  &lt;div
          class="main_content"
          @mousedown="loopZoom()"
          @mouseup="clearLoopZoom()"
          @click="handlerZoom()"
        &gt;
          Test long press
        &lt;/div&gt;

   handlerZoom() {
        if () {
          ('Execute click event')
        }
         = false
    },
    loopZoom() {
      ("Long press to start")
       = new Date().getTime()
       = setTimeout(() =&gt; {
      ("Long press event")
      }, 800);
    },
    clearLoopZoom() {
      ("Long press to end")
      =new Date().getTime()
      if ( -  &lt; 100) {
          =true
        }
      clearTimeout();
       = "";
      clearInterval();
       = "";
    },

The above is personal experience. I hope you can give you a reference and I hope you can support me more.