CODEWITHSUNDEEP
jquerycordovaclickdoubletap
Kal
Kal

Reputation: 211

Cordova JQuery Tap / Click Issues

I am having trouble getting tap/click functionality to work properly on my Cordova app. I am trying to fix an issue where a rapid double tap on a button will hang up the app. When I use "click" it fixes this issue but I run into a secondary problem of the page being recreated all over again from pagecreate all the way to pageshow events. When I use "tap" the page isn't recreated from scratch like with click, but if I do a quick double tap on the button it locks up the page. I am using Cordova 6.1.0, Jquery 2.1.4, and JQueryMobile 1.4.5. I am also using the fastclick plugin to remove the 300 ms delay in clicks. Hopefully someone can help me.

$(document).on("pagebeforeshow", "#index", function() {
    $page = $("#index");
    $button = $("#buttonId", $page);

    // Tap method
    $button.off("tap").on("tap", function() {
        // do something
    });

    // Click method
    $button.off("click").on("click", function() {
        // do something
    });
});

Upvotes: 0

Views: 389

Answers (1)

Kal
Kal

Reputation: 211

I managed to fix all the issues above with the following code. I added a debounce function in "ondeviceready" and added the preventDefault code inside button click event.

function onDeviceReady() {
// Debounce double clicks
var last_click_time = new Date().getTime();
document.addEventListener('click', function (e) {
    var click_time = e['timeStamp'];
    if (click_time && (click_time - last_click_time) < 1000) {
        e.stopImmediatePropagation();
        e.preventDefault();
        return false;
    }
    last_click_time = click_time;
}, true);
}

$(document).on("pagebeforeshow", "#index", function() {
    $page = $("#index");
    $button = $("#buttonId", $page);

    $button.off("click").on("click", function(e) {
        e.preventDefault();
        // do something
    });
});

Upvotes: 1

Related Questions