onclick and ontouchstart simultaneously

css, html, javascript, touch

Solution

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.

Problem

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.

Original source

Related problems