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         


        

Answer 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.

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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.

Answer 6

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>