Question

我在移动设备/平板电脑上遇到问题，事件发生两次。当我单击以下功能时，应该下拉的菜单将下拉，然后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。

Answer 3

以下内容对我有用，对@JRules答案做了些微修改

// lo is just a global object holder 
let lo = {
    "handled":false
}

使用委托，因为对象没有在原始页面加载时加载

$('body').delegate('.linkRow','click touchend',function(e) {  //   
    e.stopPropagation();
    if(lo.handled === false){  // check
        doSomething()                 
        lo.handled = true
    }
    setTimeout(() => {  // now set to false later (example here is 1/2 sec)
        lo.handled = false
    }, 500)
});

触摸事件两次射击

3 个答案: