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.

score 6 · Answer 1 · edited May 23 '17 at 11:54

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.

Bad approach due to touch devices are not limited to mobiles (and were NOT in 2014 as well). — Konstantin, Nov 16 '17 at 16:13

score 4 · Answer 2 · answered Dec 15 '14 at 15:42

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>

score 3 · Answer 3 · answered Nov 25 '16 at 04:59

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>

Not working in Chrome v65: https://www.chromestatus.com/features/5093566007214080 — Raine Revere, Mar 30 '18 at 15:20

score 0 · Answer 4 · answered Feb 02 '14 at 17:23

You can write it this way:

var called = false;
function mobileLinksShow() {
    if(!called)
        document.querySelector('.mobile-head-bar-links').classList.toggle('mobile-head-bar-links-transition');
        called = true;
    }
}

But: If you use this code, the function can only be called once, even if you click the span twice.

score 0 · Answer 5 · answered Aug 27 '14 at 04:04

This is still broken for cases like a touchscreen laptop (where 'click' may be from touch or from a mouse). Its also broken in some mobile cases where click doesn't come from touch (eg. Enter key on an attached or bluetooth keyboard).

The right solution is to correctly mark the touch event as handled with preventDefault, then no click event will be generated. Eg.

function mobileLinksShow(event) {
  document.querySelector('.mobile-head-bar-links').classList.toggle('mobile-head-bar-links-transition');
  event.preventDefault();
}

See http://www.html5rocks.com/en/mobile/touchandmouse/ for details.

score 0 · Answer 6 · answered Apr 23 '19 at 15:45

Using e.preventDefault() for touch events is not working by default start from chrome 56.

You can let it work manually by setting the { passive: false } option:

document.querySelector('mobile-head-bar-left')
  .addEventListener(
    'touchstart',
    function(e) {
      // do something
      e.preventDefault()
    },
    { passive: false }
  )

onclick and ontouchstart simultaneously

6 Answers6

Linked