onclick not working on safari and on mobile

Question

I have been trying to fix this bug for a long time and reached out to a few of my friends and they all were stumped. I have a website and none of the buttons are working on mobile or safari (On mobile when i tap the button the :hover animation plays). I have tried so many fixes (changing them to a tags, event listeners, tabindex, ontouchstart) and none work. The site is live and I can provide url if needed (but I don't want to look like I'm promoting)

Here is an example of a button not working -html-

<a href="javascript:void(0)" tabIndex="0" id="navWrap" onclick="openNav()" ontouchstart="openNav()">
        <div class="navLine"></div>
        <div class="navLine" id="navMid"></div>
        <div class="navLine" id="navBottom"></div>
</a>

-css-

#navWrap{
    position: absolute;
    top: 75px;
    right: 60px;
    transform: translate(0px, -50%);
    transition: 0.7s;
    font-size: 50px;
    cursor: pointer;
}

-javascript open Nav function-

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

-javascript event listener-

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

I have the link to the js file in the footer of the html file.

FYI: Don't use [`document.getElementsByClassName('closebtn')[0]`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474). Instead, just use `document.querySelector(".closebtn")`, Also, don't use `` just so you have something to receive a `click` event. Anchors are for navigation, not JavaScript hooks. Use a `span` with an event listener instead. — Scott Marcus, Jul 24 '20 at 21:45
I used the tag with href="javascript:void(0)" because I read that older versions of safari would not register clicks on "non-clickable" elements such as divs or spans — William Burriss, Jul 24 '20 at 23:42
You’d have to be talking about versions that are Nearly 10 years old for that to be an issue. — Scott Marcus, Jul 25 '20 at 01:51

score 0 · Answer 1 · answered Jul 24 '20 at 21:38

0

Binding multiple events like this, I hope it will work for you.

// if supported touch, otherwise click event:
let clickOrTouchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';

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

answered Jul 24 '20 at 21:38

GMKHussain

3,342
1
21
19

I tried this and it still does not work, but thanks for the recommendation – William Burriss Jul 24 '20 at 23:45

score 0 · Accepted Answer · answered Jul 27 '20 at 03:25

I fixed it and I'm honestly not sure why it wasn't working but after a long time debugging I found that a function that I had declared (not even called) for some reason caused all JavaScript to stop working. The function was an xmlHttpRequest and when I removed it everything worked fine. This might be a bug (it worked on chrome) but it was an async request so maybe. Hope this is useful to anyone with the same problem!

onclick not working on safari and on mobile

2 Answers2