How to detect a long press on a div in Jquery?

前端 未结 12 1404
广开言路
广开言路 2020-12-08 04:44

I would like to execute some function when the user presses for 2 seconds on a div.

Is it possible ?

Here is my code to detect the click on the

12条回答
  •  鱼传尺愫
    2020-12-08 05:11

    Upgrading and merging Editor and Kevin B replies you can have a fully functional, multi divs, hold-catcher with:

        // Global delta msec timeout
        var delta = 1500;
    
        $("#foo").on('mousedown', function(event) {
    
            var thisElement = $(event.currentTarget);
            var deltaTimer = setTimeout(function(){
    
                console.log('long press!');
                thisElement.removeData('startTimestamp');
            }, delta);
    
            thisElement.data('startTimestamp', new Date().getTime());
            thisElement.data('timer', deltaTimer);
        }).on('mouseleave', function(event) {
    
            var thisElement = $(event.currentTarget);
            clearTimeout(thisElement.data('timer'));
    
            thisElement.removeData('startTimestamp');
            thisElement.removeData('timer');
        }).on('mouseup', function(event) {
    
            var thisElement = $(event.currentTarget);
            var startTimestamp = thisElement.data('startTimestamp');
            clearTimeout(thisElement.data('timer'));
    
            if (startTimestamp !== undefined && !isNaN(parseInt(startTimestamp))) {
    
                if (new Date().getTime() >= (startTimestamp + delta))
                   console.log('long press!');
                else
                   console.log('short press!');
            }
    
            thisElement.removeData('startTimestamp');
            thisElement.removeData('timer');
        });
    

提交回复
热议问题