CODEWITHSUNDEEP
androidgoogle-chromedouble-clicktouch-eventnexus-10
louis w
louis w

Reputation: 127

How to disable double tap zoom feature in Chrome 30 on Android (Nexus 10)

Is it possible to disable the context zoom triggered by double-tapping an element on Chrome? (Setup: Nexus 10 | Android 4.3 | Chrome 30).

Double-tapping isn't one of the native touch events (touchstart, touchend, etc). It seems that the only solutions out there are libraries that define a doubletap event themselves (jquery-doubletap and hammer.js), but I'm running into issues using these (https://github.com/EightMedia/hammer.js/issues/388).

Can anyone explain how the doubletap event is triggered? it doesn't seem to be an element event, but rather one that is handled by the browser itself (with each browser dictating their own unique behavior).

Lastly, is there a way to disable double-tap zoom? It's a UX killer for me. Thanks.

Upvotes: 5

Views: 24943

Answers (3)

some
some

Reputation: 49612

I wanted to prevent double tap zoom, but allow pinch zoom. I solved that by looking at event.touches.length, and only prevents the event if the length is 1 and too little time has passed.

function preventDoubleTap(elem) {
  let lastTimeStamp = 0;
  elem.addEventListener('touchstart', (event) => {
    if (event.touches.length === 1) {
      if (event.timeStamp - lastTimeStamp < 300) event.preventDefault();
      lastTimeStamp = event.timeStamp;
    }
  });
}

Upvotes: 0

Frank
Frank

Reputation: 2230

This code will basically just prevent the double tap feature from happening. The event is still triggered for every touchstart event, so just put any other functionality outside of that if statement and you'll be free of the annoying double tap zoom feature.

var time_stamp = 0; // Or Date.now()
window.addEventListener("touchstart", function(event_) {
    if (event_.timeStamp - time_stamp < 300) { // A tap that occurs less than 300 ms from the last tap will trigger a double tap. This delay may be different between browsers.
        event_.preventDefault();
        return false;
    }
    time_stamp = event_.timeStamp;
});

Upvotes: 2

Matt Gaunt
Matt Gaunt

Reputation: 9821

In future versions of Chrome for Android, the double tap will be removed when you have a viewport set. If you want to disable it for stable today, you will need to set user-scalable=no in your viewport.

This will disable zooming (which may be bad for accessibility) but should allow you to get all touch events.

Upvotes: 6

Related Questions