2

对于移动设备，我如何在等待 JSON 响应时暂时阻止页面上的jQuery触摸事件？值得一提的是，我还运行了jQuery-mobile。

JSON 响应将用于创建和更新页面上的内容，但在 JSON 响应返回并且我已完成必要的操作之前，我希望禁用（或阻止用户激活它们）具有事件处理程序的其他元素页面内容的调整。

以我有限的经验，我正在考虑两种方法。

(1)我正在考虑创建或激活一个覆盖 div，以防止覆盖下元素上的 jQuery 事件侦听器检测到触摸事件，但是我找不到执行此操作的方法。

(2)我正在考虑的另一种方法是Object跟踪所有侦听器并根据命令将它们打开，.off()然后一旦 JSON 和调整完成，我就可以重新附加它们，.on('click')但是如果我能用第一个实现我想要的，这似乎过分了方法。

我正在寻找的是最受支持的方式，这意味着可以在 Android、Windows Mobile 和 IOS 上运行的方式

4

2 回答 2

2

正如@Sheetal 指出的那样，jQuery-Mobile 加载小部件可用于吸收 Ajax 调用期间的所有触摸事件。

演示

此步骤是可选的，但对于修改加载小部件默认值仍然有用。下面的代码应该放在head中，在加载 jQuery 之后和加载 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 = "";
});

下一步，显示加载微调器并根据屏幕高度和宽度调整高度和宽度以填充整个屏幕。

$('.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');

调整屏幕大小时调整加载微调器的高度和宽度。

$(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
  });
});

隐藏加载微调器。

$.mobile.loading("hide");
于 2013-09-14T05:58:39.563 回答
0

更好的方法：

// 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");    
});
于 2013-09-16T04:52:04.477 回答