How to perform click-and-hold operation inside an element using jQuery ?

Last Updated : 31 Jul, 2019

Given an HTML element and the task is to click and hold an element in a document for a few seconds to perform the operation using jQuery.

Approach:

Select an HTML element.
Add the event listener to that element and add a timeOut timer for that event.
If that event happens to active for few seconds then trigger other event to identify that the event happens.

Example 1: In this example, clicking and holding inside the div for 2 seconds will trigger other event, which simply prints that event happened.

<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to perform click-and-hold operation 
        inside an element using jQuery ? 
    </title> 
      
    <style> 
        #div { 
            background: green; 
            height: 100px; 
            width: 200px; 
            margin: 0 auto; 
            color: white; 
        } 
    </style> 
      
    <script src =  
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head>  
  
<body style = "text-align:center;">  
      
    <h1 style = "color:green;">  
        GeeksForGeeks  
    </h1> 
      
    <p id = "GFG_UP" style =  
        "font-size: 19px; font-weight: bold;"> 
    </p> 
      
    <div id = "div"> 
        Div Element. 
    </div> 
    <br> 
      
    <p id = "GFG_DOWN" style =  
        "color: green; font-size: 24px; font-weight: bold;"> 
    </p> 
      
    <script> 
        $('#GFG_UP').text("Click and Hold inside the" 
                    + " div for 2 seconds"); 
          
        var tId = 0; 
          
        $('#div').on('mousedown', function() { 
            tId = setTimeout(GFG_Fun, 2000); 
        }).on('mouseup mouseleave', function() { 
            clearTimeout(tId); 
        }); 
          
        function GFG_Fun() { 
            $('#GFG_DOWN').text("Click and Hold for 2 " 
                    + "seconds, done."); 
        } 
    </script>  
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example 2: In this example, clicking and holding inside the body document for 2 seconds will trigger other event, which simply prints that event happened. This example separates the logic of mousedown and mouseup events.

<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to perform click-and-hold operation 
        inside an element using jQuery ? 
    </title> 
      
    <style> 
        #div { 
            background: green; 
            height: 100px; 
            width: 200px; 
            margin: 0 auto; 
            color: white; 
        } 
    </style> 
      
    <script src =  
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head>  
  
<body style = "text-align:center;">  
      
    <h1 style = "color:green;">  
        GeeksForGeeks  
    </h1> 
      
    <p id = "GFG_UP" style = 
        "font-size: 19px; font-weight: bold;"> 
    </p> 
      
    <div id = "div"> 
        Div Element. 
    </div> 
    <br> 
      
    <p id = "GFG_DOWN" style =  
        "color: green; font-size: 24px; font-weight: bold;"> 
    </p> 
      
    <script> 
        $('#GFG_UP').text("Click and Hold inside the" 
                    + " div for 2 seconds"); 
          
        var tId = 0; 
          
        $("#div").mousedown(function() { 
            tId = setTimeout(GFG_Fun, 2000); 
            return false; 
        }); 
        $("#div").mouseup(function() { 
            clearTimeout(tId); 
        }); 
          
        function GFG_Fun() { 
            $('#GFG_DOWN').text("Click and Hold for 2 " 
                    + "seconds, done."); 
        } 
    </script>  
</body>  
  
</html> 