html5 ontouchstart,javascript - onclick and ontouchstart simultaneously - Stack Overflow

I have an ontouchstart event triggered on my mobile view, its linked to this:

function mobileLinksShow() {

document.querySelector('.mobile-head-bar-links').classList.toggle('mobile-head-bar-links-transition');

}

On my device (iPhone 5) when I tap the button, it toggles it twice and so it extends then contracts. This is because of the onclick and ontouchstart firing at the same time. Removing the onclick solves the issue on mobile but now the desktop browser clearly doesnt work, is there a way to suppress onclick on mobile?

HTML:

CSS:

.mobile-head-bar-links {

height: 0;

overflow: hidden;

background-color: #F76845;

transition: .5s ease;

-webkit-transition: .5s ease;

}

.mobile-head-bar-links-transition {

height: 7em;

}

NB. I don't want to use jQuery.