CODEWITHSUNDEEP
javascriptjquery
user3032973
user3032973

Reputation: 415

Temporarily disable touchstart event

I have a mobile based web application. Currently I am encountering an issue when ajax calls are being made. The wait spinner which is enclosed in a div can be clicked through on the ipad device. The javascript event being triggered is touchstart. Is there anyway to prevent this event from going through normal processing?

Tried to call the following, however it did not work.

Disable
 document.ontouchstart = function(e){ e.preventDefault(); }
Enable
  document.ontouchstart = function(e){ return true; }

How touchstart is handled 

$(document).on('touchstart', function (eventObj) {
    //toggle for view-icon
    if (eventObj.target.id == "view-icon") {
        $("#view-dropdown").toggle();
    } else if ($(eventObj.target).hasClass("view-dropdown")) {
        $("#view-dropdown").show();
    } else {
        $("#view-dropdown").hide();
    }
});

Upvotes: 1

Views: 2744

Answers (1)

Vestalis
Vestalis

Reputation: 270

As user3032973 commented, you can use a touchLocked variable, which is working perfectly.

I have used it in combination with the Cordova Keyboard-Plugin. Scrolling will be disabled the time the keyboard is shown up and reenabled the time the keyboard is hiding: 

var touchLocked = false;

Keyboard.onshowing = function () {
    touchLocked = true;
};

Keyboard.onhiding = function () {
    touchLocked = false;
};

document.ontouchstart = function(e){
    if(touchLocked){
        e.preventDefault();
    }
};

Upvotes: 1

Related Questions