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

如this answer所示，最好将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

（Shubham Chaudhary的答复）我希望这应该工作

window.onclick = eventHandler
window.ontouch = eventHandler


function eventHandler(event){
...
}

我的按钮在移动设备上不起作用，但在chrome上的移动模拟器上却起作用

3 个答案: