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

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>
Output:
Before clicking on the button:
After clicking on the button:
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
Difference Between JavaScript and jQuery
How to get the value in an input text box using jQuery ?
QR Code Generator using HTML, CSS and jQuery
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?