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

Question

当我的菜单覆盖在触摸设备上显示时（在 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");
        }
    });
});

Answer 1

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