Great question! +1
The issue at hand is unrelated to FastClick, although using FastClick can complicate the solution. Therefore, I will focus on utilizing pure JavaScript and raw Touch Events instead.
When dealing with a mobile touch device, the implementation of the webview differs significantly from that of a desktop web browser due to platform-specific reasons. One crucial feature in this scenario is momentum scrolling within the webview, which is a hardware-accelerated capability. Essentially, when a scrollable area is touched on the screen, the hardware sets a 200 millisecond countdown timer that triggers accelerated scrolling. During this period, touch events are not broadcasted as they pertain to the hardware-accelerated scroll. By utilizing preventDefault on the touch event within the specified timeframe, the timer can be cancelled, and momentum scrolling can be prevented.
Here is my approach to addressing this problem assuming you are employing native scroll (i.e., overflow:scroll). The method involves attaching a touchstart event to the desired element. Once the touchstart event is triggered, additional touchend, touchmove, and touchcancel events are attached to the target. Subsequently, a setTimeout timer is initiated to remove these added events after 140ms.
Below are snippets from my production code:
var eventify = (function () {
// Function for adding events to elements
})();
var uneventify = (function () {
// Function for removing events from elements
})();
Additionally, I have a method named tapify specifically for tap events on the scroller:
var tapify = (function () {
// Function for handling tap events
})();
I utilize global.isIos to differentiate the target device, as Android ceases sending touch events to the webview after 200ms.
To attach the event to an element or a collection of elements, simply use:
tapify(document.querySelectorAll('button'), function (e) {
// Your event handler logic here!!
});
I hope this explanation aids you in resolving your issue!