Handling long-press event

Image result for long press

On desktop, to handle long-press event, we can utilize mousedown/mouseup event, with setTimeout to control the time period of the mouse pressed.

Problem:

However desktop browser support mousedown/mouseup event, but not touchstart/touchend event, while mobile behave the reverse way.

Solution:

  • declare two valiables:
var touchstart = 'mousedown';
var touchend = 'mouseup';

check which event the browser support

if('ontouchstart' in document.documentElement){
    touchstart = 'touchstart';
    touchend = 'touchend'
 }
  • Handling long press event
$.each($US.file_id,(e,v)=>{
    $("#"+v).off(touchstart);
    $("#"+v).on(touchstart,$.proxy(()=>{
       timer = setTimeout($US.deleteFile.bind(null,v), 800);
    },null,e,v));
 
    $("#"+v).on(touchend,()=>{
       clearTimeout(timer);
    });
});

Ref: Passing parameters to event handler, setTimeout

Project: UService

Advertisements

Leave a Reply