Javascript jQuery 中的 Longpress/longclick 事件支持/插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12144374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Longpress / longclick event support / plugin in jQuery
提问by Jasper de Vries
I'm working on a website which requires mouseover menu's. I would not recommend mouseover menu's from an accessibility point of view, but it's pretty easy to implement using jQuery.
我正在开发一个需要鼠标悬停菜单的网站。从可访问性的角度来看，我不推荐鼠标悬停菜单，但使用 jQuery 实现它非常容易。
The problem: we also need to support touchscreen devices (tablets). On such a device you don't have a mouse and, so the mouseover event is not working. I was hoping for jQuery to have a longpress event, but it doesn't. I did find a jQuery longclick pluginusing Google, but it was for jQuery 1.4, so I'm not keen on using that. Also the jQuery plugin site is under maintenance at the moment, so that is not very helpful.
问题：我们还需要支持触摸屏设备（平板电脑）。在这样的设备上，您没有鼠标，因此鼠标悬停事件不起作用。我希望 jQuery 有一个 longpress 事件，但它没有。我确实使用 Google找到了一个jQuery longclick 插件，但它是针对 jQuery 1.4 的，所以我并不热衷于使用它。此外，jQuery 插件站点目前正在维护中，所以这不是很有帮助。
So the question: is there an elegant plugin for jQuery 1.7 / 1.8 to support longpress / longclick events?
所以问题是：是否有一个优雅的 jQuery 1.7 / 1.8 插件来支持 longpress / longclick 事件？
回答by Jasper de Vries
It turns out that you can just use the existing longclick pluginfor jQuery 1.4 with jQuery 1.8.
事实证明，您可以在jQuery 1.8 中使用现有的用于 jQuery 1.4 的longclick 插件。
$("#area").mousedown(function(){
$("#result").html("Waiting for it...");
});
$("#area").longclick(500, function(){
$("#result").html("You longclicked. Nice!");
});
$("#area").click(function(){
$("#result").html("You clicked. Bummer.");
});<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://rawgit.com/pisi/Longclick/master/jquery.longclick-min.js"></script>
<p id="area">Click me!</p>
<p id="result">You didn't click yet.</p>回答by Ian
Something you could do is use delayed checks with setTimeoutduring the various mouse events. Incorporating jQuery's $.data()to store the timeout across events (on each element) should help you accomplish it all. Here's an example:
您可以做的是setTimeout在各种鼠标事件期间使用延迟检查。结合 jQuery$.data()来存储跨事件（在每个元素上）的超时应该可以帮助您完成这一切。下面是一个例子：
HTML:
HTML：
<ul id="menu">
<li><a href="#" onclick="return false;" class="test"></a></li>
<li><a href="#" onclick="return false;" class="test"></a></li>
</ul>
JS:
JS：
var mousepress_time = 1000; // Maybe hardcode this value in setTimeout
var orig_message = "Click Here"; // Remove this line
var held_message = "Down"; // Remove this line
$(document).ready(function () {
$(".test")
.html(orig_message) // Remove this line
.on("mousedown", function () {
console.log("#########mousedown"); // Remove this line
var $this = $(this);
$(this).data("checkdown", setTimeout(function () {
// Add your code to run
$this.html(held_message); // Remove this line
}, mousepress_time));
}).on("mouseup", function () {
clearTimeout($(this).data("checkdown"));
console.log("#######mouseup"); // Remove this line
$(this).html(orig_message); // Remove this line
}).on("mouseout", function () {
clearTimeout($(this).data("checkdown"));
console.log("#######mouseout"); // Remove this line
$(this).html(orig_message); // Remove this line
});
});
DEMO: http://jsfiddle.net/7jKYa/10/
演示：http: //jsfiddle.net/7jKYa/10/
There's a lot more to do with this, since you're also incorporating hovering, but for the most part, I think this does what you want.
这还有很多事情要做，因为您还合并了悬停，但在大多数情况下，我认为这可以满足您的需求。
It could easily be converted to a plugin if necessary, otherwise I think it could work fine alone. I hope this helps though!
如有必要，它可以轻松转换为插件，否则我认为它可以单独工作。我希望这会有所帮助！
回答by Anthony Scaife
You could time it.
你可以计时。
function onImageMouseDown(e){
var d = new Date();
md_time = d.getTime(); // Milliseconds since 1 Apr 1970
}
function onImageMouseUp(e){
var d = new Date();
var long_click = (d.getTime()-md_time)>1000;
if (long_click){
// Click lasted longer than 1s (1000ms)
}else{
// Click lasted less than 1s
}
md_time = 0;
}
