我有以下jquery事件处理函数：
$('.target').on('dblclick', function() {
//respond to double click event
});
我的问题是此事件处理程序不适用于触摸设备（iPhone、iPad...）。谁能推荐一个可靠的替代 dblclick 的替代方案，它适用于触摸设备，并且仍然允许在全尺寸设备上舒适地双击使用？
【问题讨论】：
标签： javascript jquery touch
我最终构建了一个可在移动设备和桌面设备上使用的自定义双击功能：
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>或者，这里是JSfiddle Demo。
【讨论】：
将此添加到您的 index.html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
我发现移动缩放功能会摆脱 Jquery 的 dblclick。基本上它说你的视口不会有效地改变关闭缩放。这适用于我运行 Chrome 的 Nexus 5。
【讨论】：
您可以在元素上绑定多个事件侦听器，并为触摸设备使用 jQuery 的 tap 事件。
$( ".target" ).on({
dbclick: function() {
//do stuff
}, touch: function() {
//do the same stuff
}
});
【讨论】：
感谢您的解决方案 - 我唯一做的就是添加一个超时，以便它们可以被视为单独的事件
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);
}
}));
虽然我还没有测试过，但可能还值得在任何 HTML <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 的标题部分添加以下内容：To "user-scalable=no" or not to "user-scalable=no"
【讨论】：
我知道问题已得到解答，但认为值得提出我一直使用的解决方案，干杯：
> 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);
});
【讨论】：
@JRulle 的标记答案似乎仅适用于单个对象，如果您有许多具有相同类的实例，它们将被视为单个对象
查看示例
Fiddle example
我的解决方案似乎在这种情况下有效
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>【讨论】：
具有自己的双击计数器的多个目标。接受的解决方案有 2 个错误，已在此处修复：
如果单击目标并在外部单击并在 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>【讨论】：
以编程方式，上面给出的所有答案都很好。 当你双击鼠标按钮时，它只是你手指上的质量， 所以它可以很快......
另一方面，当点击触摸屏时，通常会涉及更大的物理质量。 更大的质量意味着更慢的时间。 所以我的做法是“点击两次”而不是双击。
表示全局变量，例如var ClickCounter=0;
在函数范围内
ClickCounter++;
Check if ClickCounter ==2.
Execute your Code.
Reset counter ClickCounter=0
else return false or execute another code
【讨论】：
我对上面的代码进行了改进，单击后没有检测到双击：
var touchtime = 0;
$(".target").on("click", function() {
if (((new Date().getTime()) - touchtime) < 500) {
alert("double clicked");
}
touchtime = new Date().getTime();
});
此代码检测所有双击。我还将触摸时间减少到 500 毫秒（标准双击时间）。
【讨论】：
唯一的方法是自己检测双击。您可以通过保持最后一个 touch 事件时间戳来做到这一点，如下所示：
if (e.touches.length === 1) {
if (this.lastTouchEventTimeStamp) {
const timeInMillisecondsSinceLastTouch = e.timeStamp - this.lastTouchEventTimeStamp;
if (timeInMillisecondsSinceLastTouch > 80 && timeInMillisecondsSinceLastTouch < 400) {
// double tap will be detected here
this.lastTouchEventTimeStamp = undefined;
const dblClickEvent = new DragEvent('dblclick', {
view: window,
bubbles: true,
cancelable: true
});
e.target.dispatchEvent(dblClickEvent);
}
}
this.lastTouchEventTimeStamp = e.timeStamp;
}
【讨论】：
遇到了这个帖子，想提供一个更新的答案。
function doubleClick(event, callback) {
var touchtime = $(event.target).data("touch-time");
if (touchtime == undefined || touchtime == 0) {
// set first click
$(event.target).data("touch-time", 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
callback();
$(event.target).data("touch-time", 0);
} else {
// not a double click so set as a new first click
$(event.target).data("touch-time", new Date().getTime());
}
}
}
然后可以按如下方式使用：
$(selector).click(function(event){
doubleClick(event, function(){
console.log("Hello World");
});
});
这使用数据属性而不是全局变量来获取/设置触摸时间。
标准的dblclick 应该可以在现代移动浏览器中使用。
【讨论】：
就是这样……在 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
【讨论】：
您需要在函数末尾输入“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;
});
【讨论】：