CODEWITHSUNDEEP
javascripthtmlcssonclickontouch
Filtered
Filtered

Reputation: 75

ontouchstart onclick and eventlistener don't work on mobile but play hover animation

I am asking this question again because I tried all the answers on my previous post and none worked, and I also changed a bit.

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. Then I added an event listener and it still didn't work. 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>

window.addEventListener('load', function(){
    document.getElementById('navWrap').addEventListener('touchstart', openNav());

}

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

Also I changed the z-index of all buttons to 999 and still no fix

The website is live and I can give the url but I'm hesitant to as I don't wan't to appear like I'm promoting it. If you need it I will gladly provide it.

Upvotes: 0

Views: 539

Answers (2)

Subash R K
Subash R K

Reputation: 31

You are calling the function 'openNav()'. You just have to pass your function as a callback

window.addEventListener('load', function() {
    document.getElementById('navWrap').addEventListener('touchstart', openNav); // openNav() -> openNav
}

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

Upvotes: 1

horrible
horrible

Reputation: 117

you're missing a closure on your window.addEventListener function.

change

window.addEventListener('load', function(){
    document.getElementById('navWrap').addEventListener('touchstart', openNav());

}

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

to

window.addEventListener('load', function(){
    document.getElementById('navWrap').addEventListener('touchstart', openNav());

});

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

Upvotes: 0

Related Questions