For mobile devices how can I temporarily prevent jQuery touch events, then reactivate them?

问题

For mobile devices how can I temporarily prevent jQuery touch events on a page while I am waiting for a JSON response? For what it's worth I have jQuery-mobile also running.

The JSON response will be used to create and update content on the page but there are other elements with event handlers that I'd like to disable (or stop users from activating them) until the JSON response has come back and I have done the necessary adjustments to the page content.

With my limited experience I am considering two methods.

(1) I am considering creating or activating an overlaying div that prevents jQuery event listeners on elements under the overlay from detecting touch events however I cannot find the way to do this.

(2) The other method I am considering is an Object that keep track off all listeners and on command turns them .off() then once the JSON and adjustments have finished I can re-attach them .on('click') however this seems excessive if I can achieve what I want with the first method.

What I am looking for is the most supported way of doing this, meaning something that will work on Android, Windows Mobile and IOS

回答1:

As @Sheetal pointed out, jQuery-Mobile loading widget can be used to absorb all touch events during Ajax call.

Demo

This step is optional, but still useful to modify loading widget defaults. The code below should be placed inside head, after loading jQuery and before loading jQuery-Mobile.

$(document).on("mobileinit", function() {
  $.mobile.loader.prototype.options.text = "Hands OFF!!";
  $.mobile.loader.prototype.options.textVisible = true;
  $.mobile.loader.prototype.options.theme = "b";
  $.mobile.loader.prototype.options.html = "";
});

Next step, show loading spinner and adjust height and width to fill the whole screen, according to screen height and width.

$('.ui-loader').css({
    'position': 'fixed',
        'top': 0,
        'left': 0
});

$('.ui-loader-verbose').css({
    'height': $(window).height(),
        'width': $(window).width(),
        'margin': 0,
        'padding-top': 150 // to center spinner and text
});

// show loading spinner
$.mobile.loading("show");

// to remove corners
$('div.ui-loader').removeClass('ui-corner-all');

Adjust loading spinner height and width when resizing the screen.

$(window).on('resize', function () {
  $('.ui-loader').css({
    'position': 'fixed',
        'top': 0,
        'left': 0
  });
  $('.ui-loader-verbose').css({
    'height': $(window).height(),
        'width': $(window).width(),
        'margin': 0,
        'padding-top': 150 // to center spinner and text
  });
});

To hide loading spinner.

$.mobile.loading("hide");

回答2:

A much better approach:

// generic loader icon for ajax start
$(document).ajaxStart(function () {  
  $(".ui-loader").css("display", "block"); 
  $.mobile.showPageLoadingMsg(); // Or $.mobile.loading("show");
}); 

// generic loader icon for ajax stop
$(document).ajaxStop(function () {     
  $(".ui-loader").css("display", "none");
  $.mobile.hidePageLoadingMsg(); // Or $.mobile.loading("hide");    
});

来源：https://stackoverflow.com/questions/18775724/for-mobile-devices-how-can-i-temporarily-prevent-jquery-touch-events-then-react

标签

jquery

css

jquery-mobile