Javascript “双击”事件上的 jQuery（dblclick 移动版）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27560653/
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
jQuery on 'double click' event (dblclick for mobile)
提问by JRulle
I have the following jquery event handling function:
我有以下 jquery 事件处理函数：
$('.target').on('dblclick', function() {
//respond to double click event
});
My issue is that this event handler doesn't work on touch devices (iPhone, iPad...). Can anyone recommend a reliable alternative to dblclickthat works on touch devices and still allows comfortable double click use on full size devices?
我的问题是此事件处理程序在触摸设备（iPhone、iPad...）上不起作用。任何人都可以推荐一个可靠的替代方案dblclick，可以在触摸设备上使用并且仍然允许在全尺寸设备上舒适地双击使用吗？
采纳答案by JRulle
I ended up building a custom double click function that will work on both mobile and desktop:
我最终构建了一个可以在移动设备和桌面设备上使用的自定义双击功能：
var touchtime = 0;
$(".target").on("click", function() {
if (touchtime == 0) {
// set first click
touchtime = new Date().getTime();
} else {
// compare first click to this click and see if they occurred within double click threshold
if (((new Date().getTime()) - touchtime) < 800) {
// double click occurred
alert("double clicked");
touchtime = 0;
} else {
// not a double click so set as a new first click
touchtime = new Date().getTime();
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="target">Double click me</div>Alternatively, here is the JSfiddle Demo.
或者，这里是JSfiddle 演示。
回答by Aweary
You can bind multiple event listeners on the element and use jQuery's tapevent for the touch devices.
您可以在元素上绑定多个事件侦听器，并tap为触摸设备使用 jQuery事件。
$( ".target" ).on({
dbclick: function() {
//do stuff
}, touch: function() {
//do the same stuff
}
});
回答by Thomas Valadez
Add this to your index.html
将此添加到您的 index.html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
I found the mobile zoom function would throw off Jquery's dblclick. Basically it says your viewport wont change effectively shutting off the zoom. This works for me on my Nexus 5 running Chrome.
我发现移动缩放功能会抛弃 Jquery 的 dblclick。基本上它说你的视口不会有效地改变关闭缩放。这适用于我运行 Chrome 的 Nexus 5。
回答by Elliott de Launay
Thanks for the solution - the only thing I did was add a timeout so that they could be treated as separate events
感谢您的解决方案 - 我所做的唯一一件事就是添加一个超时，以便它们可以被视为单独的事件
var touchtime = 0;
var delay = 800;
var action = null;
$(".target").on("click", function() {
/*Double Click */
if((new Date().getTime() - touchtime) < delay){
clearTimeout(action)
alert('dbl');
touchtime=0;
}
/* Single Click */
else{
touchtime = new Date().getTime();
action = setTimeout(function(){
alert('single');
},delay);
}
}));
Although I haven't tested it, might also be worth adding the following to a header section of any HTML <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>as per: To "user-scalable=no" or not to "user-scalable=no"
虽然我还没有测试过，但也可能值得将以下内容添加到任何 HTML 的标题部分<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>：“user-scalable=no”或不“user-scalable=no”
回答by Kurdi Bogdán
Multiple targets with own doubleclick counter. The accepted solution has 2 bugs, that are fixed here:
具有自己的双击计数器的多个目标。已接受的解决方案有 2 个错误，已在此处修复：
If you click on target and click outside and click on target again within 800 ms, then the doubleclick event fires.
If you have multiple targets, click on different targets within 800 ms, and the doubleclick event fires.
如果您单击目标并单击外部并在 800 毫秒内再次单击目标，则会触发双击事件。
如果您有多个目标，请在 800 毫秒内单击不同的目标，然后将触发双击事件。
$(document).on("click", function(e)
{
var MAX_DELAY_IN_MS = 800;
var current_time = new Date();
var targets = $(".target");
if ((typeof last_target == "undefined") ||
(last_target == 0))
{
last_target = e.target;
last_click = current_time;
}
else
{
if ((last_target == e.target) &&
((targets.is(e.target) == true) ||
(targets.has(e.target).length !== 0)) &&
(current_time - last_click < MAX_DELAY_IN_MS))
{
alert("double clicked");
}
last_target = 0;
last_click = 0;
}
});div{display:inline-block; width:30px; height:30px; margin:5px;}
.target{background-color:lime;}
.no_target{background-color:orange;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="target"></div>
<div class="target"></div>
<div class="no_target"></div>
<div class="target"></div>回答by Luis Rita
I know the question has been answered but thought it would be worth putting the solution I use all the time, cheers:
我知道这个问题已经得到了回答，但我认为值得把我一直使用的解决方案放在一边，欢呼：
var doubleClicked = false;
$('.target').on('click', function() {
if (doubleClicked) {
//do what you want to do on double click here
}
doubleClicked = true;
setTimeout(() => {
doubleClicked = false;
}, 300);
});
回答by B.F.playz
The marked answer of @JRulle seems to work only for a single object, if u have many instances with the same class they will be considered as a single object
see the example
Fiddle example
@JRulle 的标记答案似乎仅适用于单个对象，如果您有许多具有相同类的实例，它们将被视为单个对象，请参见示例
Fiddle 示例
My solution seems to work in cases like that
我的解决方案似乎适用于这种情况
var touchtime = 0;
$('.target').on('click', function() {
if (touchtime == 0) {
touchtime = new Date().getTime();
} else {
if (((new Date().getTime()) - touchtime) < 800) {
alert("double clicked");
touchtime = 0;
} else {
touchtime = 0;
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="target">click me!</p>
<p class="target">then click me!</p>
<a href="#">click link</a>回答by webslash
I have an improvement to the code above, that didn′t detect a doubleclick after a single click:
我对上面的代码进行了改进，单击后没有检测到双击：
var touchtime = 0;
$(".target").on("click", function() {
if (((new Date().getTime()) - touchtime) < 500) {
alert("double clicked");
}
touchtime = new Date().getTime();
});
This code detects all doubleclicks. I also reduced the touchtime to 500ms (standard doubleclick-time).
此代码检测所有双击。我还将触摸时间减少到 500 毫秒（标准双击时间）。
回答by eGroz
This is it... in CoffeeScript
这就是...在 CoffeeScript 中
onDblClick = -> "...your function to be fired..."
dbl_click = null
$(element).on 'mousedown', ->
onDblClick() if dbl_click
dbl_click = true
setTimeout () ->
dbl_click = false
, 250
回答by Hemant Jadhav
You need to enter "return false" to the end of the function like below
您需要在函数末尾输入“return false”，如下所示
var touchtime = 0;
$('.dbclickopen').click(function() {
if(touchtime == 0) {
//set first click
touchtime = new Date().getTime();
} else {
//compare first click to this click and see if they occurred within double click threshold
if(((new Date().getTime())-touchtime) < 800) {
//double click occurred
touchtime = 0;
window.location = this.href;
} else {
//not a double click so set as a new first click
touchtime = new Date().getTime();
}
}
return false;
});
