JavaScript in iOS: Avoid clicking events while scrolling on iPhone / iPad

3

Scenario:

I have a table and on the Desktop should I double-click to access the contents of each table item. On mobile devices like tablet and smarthphone double clicking does not work and you need to implement just one click / touch.

Code:

Verifies that it is a mobile device and holds it by default if it is not double clicked. If it is a mobile device uses the touchend event to click. The problem is that it is not working on the iPhone / iPad , when scrolling it already triggers the click event. Only works on Android devices.

Any suggestions?

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var clickEvent = 'dblclick';

if(isMobile) {
    clickEvent = 'touchend click';
}

$(document).on(clickEvent, '.class', function() {

/* faz alguma coisa */

});
    
asked by anonymous 15.07.2014 / 17:59

2 answers

3

I made a functional example in jsFiddle, also put comments that help to understand the logic. link

Remembering that on the desktop it works with double click and on mobile devices in general, it works with a touch, it also allows scrolling on the touchscreen.

    
15.07.2014 / 20:35
1

Implementing touch with touchend is very simplistic, because you will get cases like scroll and any other touch.

It's best to use some implementation of the tap event. If you use Zepto, you have on('tap',...) . Or use tappy ( link ) or HammerJS or Fastclick or ... etc.

    
15.07.2014 / 20:40