html单击拖动和双击,jQuery上的“双击”事件（用于移动设备的dblclick）

我有以下jquery事件处理功能：$('.target').on('dblclick', function() {

//respond to double click event

});

我的问题是此事件处理程序无法在触摸设备(iPhone，iPad ...)上运行。 谁能推荐dblclick的可靠替代品，该替代品可在触摸设备上运行，并且仍然允许在全尺寸设备上舒适地双击使用？

9 个回复:

===============>>#1 票数：18 已采纳

我最终构建了一个自定义双击功能，该功能将在移动设备和台式机上都可以使用：

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(); } } });

Double click me

===============>>#2 票数：3

您可以在元素上绑定多个事件侦听器，并将jQuery的tap事件用于触摸设备。$( ".target" ).on({

dbclick: function() {

//do stuff

}, touch: function() {

//do the same stuff

}

});

===============>>#3 票数：3

将此添加到您的index.html

我发现移动缩放功能会抛弃Jquery的dblclick。 基本上，它说您的视口不会有效改变以关闭缩放。 这适用于运行Chrome的Nexus 5。

===============>>#4 票数：1

@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; } } });

click me!

then click me!

click link

===============>>#5 票数：1

感谢您的解决方案-我唯一要做的就是添加一个超时，以便可以将其视为单独的事件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 为： ” user-scalable = no“或不” user-scalable = no“

===============>>#6 票数：1

具有自己的doubleclick计数器的多个目标。 可接受的解决方案有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;}

===============>>#7 票数：0

我对上面的代码进行了改进，单击后未检测到双击：var touchtime = 0;

$(".target").on("click", function() {

if (((new Date().getTime()) - touchtime) < 500) {

alert("double clicked");

}

touchtime = new Date().getTime();

});

此代码检测所有双击。 我还将触摸时间减少到500ms(标准的doubleclick-time)。

===============>>#8 票数：-1

就这样...在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

===============>>#9 票数：-2

您需要在函数末尾输入“ 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;

});