事件发生两次,移动设备/平板电脑出现问题.当我单击以下功能时,应该下拉的菜单将下拉,然后immediataly滑回.这只是触控设备的问题.
$(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");
}
});
任何输入都会很棒,谢谢!!
解决方法
您的问题是您的函数被触发两次(每种事件类型一次).
请参阅此处的 DEMO(我使用mousedown并点击,因为我现在在桌面上 – 但它的原理相同).
请参阅此处的 DEMO(我使用mousedown并点击,因为我现在在桌面上 – 但它的原理相同).
您需要捕获并处理对事件的重复调用.
您可以尝试设置一个处理的布尔值,以便click事件知道触摸事件是否处理了事件(触摸事件应首先触发).这样的东西……
var handled = false;
$(document).on("touchend click",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");
}
}
