极客教程如何使用jQuery在一个元素中进行点击和保持操作
给定一个HTML元素，任务是在文档中点击并按住一个元素几秒钟，用jQuery执行操作。
方法:
- 选择一个HTML元素。
- 将事件监听器添加到该元素，并为该事件添加一个超时计时器。
- 如果该事件恰好激活了几秒钟，那么就会触发其他事件来识别该事件的发生。
例子1：在这个例子中，在div内点击并保持2秒将触发其他事件，它只是简单地打印出该事件发生。
<!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>
输出:
- 在点击按钮之前。
- 点击该按钮后。
例子2：在这个例子中，在正文文件内点击并保持2秒钟将触发其他事件，它只是简单地打印出该事件发生。这个例子分离了mousedown和mouseup事件的逻辑。
<!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>
输出:
- 在点击按钮之前。
- 点击该按钮后。
