问题描述
我在移动设备/平板电脑上遇到了问题,事件触发了两次.当我单击以下功能时,应该下拉的菜单将下拉然后立即向上滑动.这只是触摸设备的问题.
I am having problems on mobile devices/tablets with the events firing twice. When I click the following function, the menu that is supposed to drop down will drop down then immediataly slide back up. It is only an issue with touch devices.
$(document).on("touchend click", ".lines-button", function(e){
e.stopImmediatePropagation();
if($(this).hasClass("close")){
$(this).removeClass("close");
$(".widget1x1Back").next(".actionsHolder3").slideUp("fast", function() {
$(this).remove();
});
}else{
var iconsList = $(this).closest(".top1x1").next(".hdnActnLst").find(".iconsHolder3").html();
$(this).closest(".widget1x1").append(iconsList);
$(this).closest(".widget1x1").find(".actionsHolder3").hide();
$(this).closest(".widget1x1").find(".actionsHolder3").slideDown(700,"easeOutBack");
$(this).addClass("close");
}
});
任何输入都会很棒,谢谢!
Any input would be great, thanks!!
推荐答案
您的问题是您的函数被触发了两次(每种事件类型一次).请参阅(我使用了mousedown
和 DEMO ). click
就像我现在在台式机上一样-但原理相同).
Your issue is that your function is getting triggered twice (once for each event type).See the DEMO here (I used mousedown
and click
as I am on a desktop right now - but its the same principle).
您需要捕获并处理对该事件的重复调用.您可以尝试设置一个处理的布尔值,以便click
事件知道touch
事件是否处理了该事件(touch事件应该首先触发).像这样...
You need to catch and handle duplicate calls to the event.You could try setting a handled boolean so the click
event knows if the touch
event handled the event or not (the touch event should be firing first). Something like this...
var handled = false;
$(document).on("touchend click", ".lines-button", function(e){
e.stopImmediatePropagation();
if(e.type == "touchend") {
handled = true;
handleIt();
}
else if(e.type == "click" && !handled) {
handleIt();
}
else {
handled = false;
}
});
function handleIt() {
if($(this).hasClass("close")){
$(this).removeClass("close");
$(".widget1x1Back").next(".actionsHolder3").slideUp("fast", function() {
$(this).remove();
});
}else{
var iconsList = $(this).closest(".top1x1").next(".hdnActnLst").find(".iconsHolder3").html();
$(this).closest(".widget1x1").append(iconsList);
$(this).closest(".widget1x1").find(".actionsHolder3").hide();
$(this).closest(".widget1x1").find(".actionsHolder3").slideDown(700,"easeOutBack");
$(this).addClass("close");
}
}
这篇关于触摸事件触发两次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!