触摸事件两次射击

事件发生两次，移动设备/平板电脑出现问题。 当我单击以下function时，应该下拉的菜单将下拉，然后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"); } }); 

任何输入都会很棒，谢谢!!

Answer 1

您的问题是您的函数被触发两次（每种事件类型一次）。 在这里看到DEMO （我使用mousedown并click因为我现在在桌面上 – 但它的原理相同） 。

您需要捕获并处理对事件的重复调用。 您可以尝试设置一个处理的布尔值，以便click事件知道touch事件是否处理了事件（触摸事件应首先触发）。 这样的东西……

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

Answer 2

在大多数情况下，以下代码都可以：

 $(document).on("touchend click", ".lines-button", function(e){ if(e.type == 'touchend'){ $(this).off('click'); } }); 

如果touchend有效，你可以摆脱click 。