单击/触摸事件的背景颜色更改在触摸设备上不起作用

Posted 2023-03-14

【中文标题】单击/触摸事件的背景颜色更改在触摸设备上不起作用

【英文标题】：Background colour change on Click/Touch event not working on touch devices

【发布时间】：2018-10-08 13:36:24

【问题描述】：

当我的菜单覆盖在触摸设备上显示时（在 iphone 和 ipad 上测试），所有内容都会显示，例如链接等，但背景颜色没有从透明改变。

在我的桌面和其他桌面上一切正常，看起来很简单。我的代码中是否有错误导致它无法在移动设备上运行？

https://codepen.io/whitinggg/pen/bLzxGG

$(document).ready(function () 

    $(".menu-btn a").on('click touch', function () 
        var scroll = $(window).scrollTop();
        $(".overlay").fadeToggle(200);
        $(this).toggleClass('btn-open').toggleClass('btn-close');

        if( $(this).hasClass('btn-close') ) 
            $(".navbar").css("background-color", "transparent");
        
        else if( scroll > 100) 
            $(".navbar").css("background-color", "#CEB400");
        
    );

    // $('.overlay').on('click', function () 
    //    $(".overlay").fadeToggle(200);
    //    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
    // );

    $('.menu a').on('click touch', function () 
        $(".overlay").fadeToggle(200);
        $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
    );

);

$(document).ready(function() 
    $(window).scroll(function() 
        var scroll = $(window).scrollTop();
        if (scroll > 100) 
            if($('.overlay:visible').length == 0) 
                $(".navbar").css("background-color", "#CEB400");
            
         else 
            $(".navbar").css("background-color", "transparent");
        
    );
);

【参考方案1】：

我不相信 jQuery（或 jQuery mobile）有“触摸”事件。您可能正在寻找tap。