触摸事件两次射击

 hf40kiu 发布于 2022-12-29 17:53

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

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

2 个回答
  • 在大多数情况下,以下代码都可以:

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

    如果touchend有效,你可能会摆脱click.

    2022-12-29 17:55 回答
  • 您的问题是您的函数被触发两次(每种事件类型一次).在这里看到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");  
            } 
    }
    

    2022-12-29 17:55 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有