How do I listen for triple clicks in JavaScript?

后端 未结 6 1489
Happy的楠姐
Happy的楠姐 2020-12-02 16:38

If this is for a double-click:

window.addEventListener(\"dblclick\", function(event) { }, false);

How can I capture a triple-click? This is

6条回答
  •  一整个雨季
    2020-12-02 17:10

    Here is the real Triple click event, which triggers only when all of three clicks fired with equal interval.

    // Default settings
    var minClickInterval = 100,
        maxClickInterval = 500,
        minPercentThird = 85.0,
        maxPercentThird = 130.0;
    
    // Runtime
    var hasOne = false,
        hasTwo = false,
        time = [0, 0, 0],
        diff = [0, 0];
    
    $('#btn').on('click', function() {
        var now = Date.now();
        
        // Clear runtime after timeout fot the 2nd click
        if (time[1] && now - time[1] >= maxClickInterval) {
            clearRuntime();
        }
        // Clear runtime after timeout fot the 3rd click
        if (time[0] && time[1] && now - time[0] >= maxClickInterval) {
            clearRuntime();
        }
        
        // Catch the third click
        if (hasTwo) {
            time[2] = Date.now();
            diff[1] = time[2] - time[1];
            
            var deltaPercent = 100.0 * (diff[1] / diff[0]);
            
            if (deltaPercent >= minPercentThird && deltaPercent <= maxPercentThird) {
                alert("Triple Click!");
            }
            clearRuntime();
        }
        
        // Catch the first click
        else if (!hasOne) {
            hasOne = true;
            time[0] = Date.now();
        }
        
        // Catch the second click
        else if (hasOne) {
            time[1] = Date.now();
            diff[0] = time[1] - time[0];
            
            (diff[0] >= minClickInterval && diff[0] <= maxClickInterval) ?
                hasTwo = true : clearRuntime();
        }  
    });
    
    var clearRuntime = function() {
        hasOne = false;
        hasTwo = false;
        time[0] = 0;
        time[1] = 0;
        time[2] = 0;
        diff[0] = 0;
        diff[1] = 0;
    };
    
    Click button three times with equal interval
    

    Also, I wrote jquery plugin TrplClick, which enables 'trplclick' event

提交回复
热议问题