我的按钮在移动设备上不起作用，但它确实适用于Chrome上的移动模拟器

Question

试图让我的汉堡图标显示移动菜单从隐藏到阻止"显示"，代码适用于带有Chrome模拟器的桌面，但不适用于实际的移动设备。我的网站 www.rikuzit.co.il

window.onclick = function(event){
    var burger = document.getElementById("burgerIcon");
    var mobileMenu = document.getElementById("mobileMenu");

if(event.target == burger){
    alert("burger was pressed");
        console.log(event.target);
        mobileMenu.style.display = "block"; 
    } else {    
        alert("clicked outside burger");
        console.log(event.target);
        mobileMenu.style.display = "none";
    }
}

我希望点击按钮时应该会出现菜单。

Answer 1

如本答案所示，最好将touchstart用于移动设备：

window.ontouchstart = function(event){
    var burger = document.getElementById("burgerIcon");
    var mobileMenu = document.getElementById("mobileMenu");

if(event.target == burger){
    alert("burger was pressed");
        console.log(event.target);
        mobileMenu.style.display = "block"; 
    } else {    
        alert("clicked outside burger");
        console.log(event.target);
        mobileMenu.style.display = "none";
    }
}

Answer 2

你可以做这样的事情

window.onclick = eventHandler
window.ontouch = eventHandler

function eventHandler(event){
   ...
}

Answer 3

（复制了舒巴姆·乔达里的答案）我希望这应该有效

window.onclick = eventHandler
window.ontouch = eventHandler

function eventHandler(event){
...
}