对于移动设备,我如何暂时阻止jQuery触摸事件,然后重新激活它们?
对于移动设备,在等待JSON响应时,如何暂时阻止页面上的jQuery触摸事件? 对于它的价值我还有jQuery-mobile也在运行。
JSON响应将用于在页面上创建和更新内容,但是有其他元素包含我要禁用的事件处理程序(或阻止用户激活它们),直到JSON响应返回并且我已经完成了必要的操作调整页面内容。
凭借我有限的经验,我正在考虑两种方法。
(1)我正在考虑创建或激活一个覆盖div来阻止覆盖下元素上的jQuery事件监听器检测到触摸事件但是我找不到这样做的方法。
(2)我正在考虑的另一个方法是一个跟踪所有监听器的Object
,并且命令将它们转换为.off()
然后一旦JSON和调整完成,我就可以重新附加它们.on('click')
然而这个如果我能用第一种方法实现我想要的东西,那似乎是过分的
我正在寻找的是最受支持的方式,这意味着可以在Android,Windows Mobile和IOS上运行
正如@Sheetal指出的那样,jQuery-Mobile加载小部件可用于吸收Ajax调用期间的所有触摸事件。
演示
此步骤是可选的,但仍可用于修改加载窗口小部件默认值。 在加载jQuery之后和加载jQuery-Mobile之前,下面的代码应放在head中 。
$(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");
一个更好的方法:
// 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"); });