onclick 和 ontouchstart 不适用于任何元素的移动设备

Question

I have been working on a website and I use onclick to open the navigation but when I tried it on mobile it didn't work, it just did the:hover animation. I then added ontouchstart to the div and it still doesn't work on mobile. When I tap it it acts like I hover over it. I've looked at a few articles on why it might not work but I can't figure it out. Also any element that uses onclick doesn't work on mobile. Also the js is a separate file (not sure if this would for some reason affect it).

<div id="navWrap" onclick="openNav()" ontouchstart="openNav()">
        <div class="navLine"></div>
        <div class="navLine" id="navMid"></div>
        <div class="navLine" id="navBottom"></div>
</div>

function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

Edit: More code

<div id="headWrap">
    <div id="logoWrap"><img src="/static/images/logo.svg" id="logo"></div>
    <div id="headText">Cite Chef</div>
    <div id="navWrap" onclick="openNav()" ontouchstart="openNav()">
        <div class="navLine"></div>
        <div class="navLine" id="navMid"></div>
        <div class="navLine" id="navBottom"></div>
    </div>
</div>

window.addEventListener('load', function(){
    document.getElementById('navWrap').addEventListener('mousedown', openNav);
    document.getElementsByClassName('closebtn')[0].addEventListener('click', closeNav);
    document.getElementById('Create').addEventListener('click', create);
    document.getElementById('TInput').addEventListener('click', MYfunctionTwo);
});

Answer 1

This might be due to some overlapping div's or element on the phone view, you need not add a separate event listener for the phone view click.

Try to inspect the code in the mobile view you might some overlapping element.

Answer 2

As you have mentioned on your previous comment, you are testing this on Safari. The inline onclick events are going to cause issues in your Web App. This is not supported in some browsers. I recommend using addEventListener . Simply remove all the inline events and migrate event handling implementations to addEventListener.

<div id="headWrap">
    <div id="logoWrap"><img src="/static/images/logo.svg" id="logo"></div>
    <div id="headText">Cite Chef</div>
    <div id="navWrap">
        <div class="navLine"></div>
        <div class="navLine" id="navMid"></div>
        <div class="navLine" id="navBottom"></div>
    </div>
</div>

---

document.getElementById('navWrap').addEventListener('click', openNav);

In case you are using a lower version of Safari Mobile. This is good information to have from MDN Web Docs in case you plan on doing event delegation in the future:

Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (eg <div> ) and which also don't have event listeners directly attached to the elements themselves (ie event delegation is being used).

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event