onclick and ontouchstart simultaneously

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.

Answers


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.


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>

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>

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.


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.


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 }
  )

Need Your Help

Why are designated initializers not implemented in g++

c++ c linux gcc designated-initializer

Is there any specific reason why has support for designated initializers not been added to g++? Is the reason that C99 standards came late and g++ was developed earlier and later people didn't care...

How do I fix my MySQL server

mysql wordpress phpmyadmin localhost

I use a local Apache server for many things, but I never really had a use for MySql. I recently decided to keep a local copy of Wordpress, so I installed MySql.