Handling long-press event

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

 1,289 total views,  9 views today

Author: IT Team