on(“click”, foo) and on(“touchstart”, foo) causing strange issues in Android vs iPhone

Question

In the script below, you'll find both "click" and "touchstart" event below. Orignally it was "click" event until we discovered that iPhone and iPad don't work because it required "touchstart" to work.

So, I included both of them so it would work for iPhone/iPad.

Then I run into Android issue where both "click" and "touchstart" get fired, leading to 2 times execution.

So, what's the recommened workaround to this issues for both iPhone and Android?

    //Saved Vehicle - Button...
    $(document).on('click touchstart', 'div[id^=RecordViewSheet]', function () {
        var dataVin = $(this).attr("data-vin");
        var dataStockNumber = $(this).attr("data-stock-number");

        ftnThrobblerAnimationBegin3().done(function () {
            httpFormSubmissionPostMethod("InspectionSheet.cshtml", "formStockNumber=" + dataStockNumber + "&formVin=" + dataVin);

            ftnThrobblerAnimationEnd3();
        });
    });

Answer 1

The way we tackled similar problem in our project was like this

function isMobile(){
    if(typeof window.orientation !== 'undefined') return true;
    return false;
}

var EVENT_CONFIG = {
    CLICK: isMobile()?'touchstart':'click'
}

and in your event assignment

$(document).on(EVENT_CONFIG.CLICK, 'div[id^=RecordViewSheet]', function () {

Explanation on the isMobile function.

Desktop browsers do not support orientation so that is how we detect if the current browser is that of desktop or of mobile.

If window.orientation is undefined then it is a desktop browser and won't support touch events.

If not, then use only touch events. You determine that in EVENT_CONFIG