我有以下jquery事件处理函数：
$('.target').on('dblclick', function() {
//respond to double click event
});
我的问题是这个事件处理程序不适用于触摸设备（iPhone、iPad...）。谁能推荐一个可靠的替代品来替代
dblclick我最终构建了一个可在移动设备和桌面上运行的自定义双击功能：
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 演示。
将此添加到您的index.html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
我发现移动缩放功能会摆脱 Jquery 的 dblclick。基本上它说你的视口不会有效地改变关闭缩放。这对我在运行 Chrome 的 Nexus 5 上有效。
我知道问题已经得到解答，但认为值得提出我一直使用的解决方案，干杯：
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);
});
您可以在元素上绑定多个事件侦听器，并为触摸设备使用 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"/>@JRulle 的标记答案似乎仅适用于单个对象，如果您有许多具有相同类的实例，它们将被视为单个对象
查看示例
小提琴示例
我的解决方案似乎在这种情况下有效
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 毫秒内再次单击目标，则会触发 doubleclick 事件。
如果您有多个目标，请在 800 毫秒内单击不同的目标，并且会触发 doubleclick 事件。
$(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 毫秒（标准双击时间）。
唯一的方法是自己检测双触摸。您可以通过保留最后一个
touchif (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简单一点^_^
<script type="text/javascript">
let lastTimeClick = 0;
$('button').on('click', function() {
let time = new Date().getTime();
if ( (time - lastTimeClick) < 600) {
alert('double clicked !');
}
lastTimeClick = time;
});
这就是...在 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;
});