Tap/Touch events not working on Samsung Android 4.4.4 and 5

973 views Asked by At

I developed an app with Cordova that worked fine until Android 5.0. The issue with the app is that I can swipe however I cannot tap/touch specific elements within my app (actually it works if I tap multiple times). Some taps work like expected such as buttons. However other elements like images etc. it doesn't work (I have images in a carousel that when tapped executes a function)

Can anyone help as to why this is happening and only happening on Android 4.4.4 and up.

My code is below

nova.touch.bindClick = function(selector, func) {
    if (nova.application.isTouchable === false) {
        $(selector).click(function(e) {
            func.call(this, e);
        });
        return;
    }
    var isMoving = false;
    var startTime = null;
    $(selector).bind(this.eventNames.touchstart, function(e) {
        isMoving = false;
        startTime = new Date();
        $(this).addClass("touching");
    });
    $(selector).bind(this.eventNames.touchmove, function(e) {
        isMoving = true;
    });
    $(selector).bind(this.eventNames.touchend, function(e) {
        var $me = $(this);
        $me.removeClass("touching");
        var duration = new Date() - startTime;
        if (!isMoving && duration < 1000) {
            $me.addClass("clicking");
            func.call(this, e);
            setTimeout(function() {
                $me.removeClass("clicking");
            }, 500);
        }
    });
};

As stated above this works fine on older versions of Android and all versions of iOS. Only the new versions of Android have this problem.

1

There are 1 answers

0
Aaron On

I had this exact same problem this afternoon. I've found that the Samsung device on this android version is too quick in categorizing a "Touch Move" event with a regular touch/"click" event.

I've found that the following fix solves this problem.

Change:

$(selector).bind(this.eventNames.touchmove, function(e) {
        isMoving = true;
    });

To:

$(selector).bind(this.eventNames.touchmove, function (e) {
        var duration = Date.now() - startTime;
        if (!isMoving && duration > 1000) {
            isMoving = true;
        }
    });

1000ms may be too much depending on your circumstances but you could change this accordingly.

Hope this helps!