onclick and ontouchstart simultaneously

Question

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:

<span class='mobile-head-bar-left' ontouchstart='mobileLinksShow()' onclick='mobileLinksShow()' ><i class="fa fa-bars"></i></span>

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.

Solution 1

Found a work around by testing the browser type and removing the onclick accordingly:

function removeMobileOnclick() {
    if(isMobile()) {
        document.querySelector('.mobile-head-bar-left').onclick  = '';
    }
}

function isMobile() {
    if (navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
            || navigator.userAgent.match(/Windows Phone/i)
            || navigator.userAgent.match(/Opera Mini/i)
            || navigator.userAgent.match(/IEMobile/i)
            ) {
        return true;
    }
}
window.addEventListener('load', removeMobileOnclick);

This way you can have both onclick and ontouchstart not interfering

isMobile function taken from Detecting mobile devices and the webOS part removed as this saw the desktop browser as mobile.

Solution 2

I just came up with the idea to just memorize if ontouchstart was ever triggered. In this case we are on a device which supports it and want to ignore the onclick event. Since ontouchstart should always be triggered before onclick, I'm using this:

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

Solution 3

You can bind a function to ontouchstart which calls whatever is bound to onclick, but then prevents default so that it doesn't actually also trigger onclick.

You can then easily copy paste this ontouchstart event to all places where you use onclick.

<span class='mobile-head-bar-left' ontouchstart='touch_start(event)' onclick='mobileLinksShow()' ><i class="fa fa-bars"></i></span>

<script>
function touch_start(e){
  e.preventDefault();
  e.target.onclick();
}
</script>