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 =
</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 =
</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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
31 Jul, 2019
Like Article
Save Article