对于移动设备，我如何暂时阻止jQuery触摸事件，然后重新激活它们？ [英] For mobile devices how can I temporarily prevent jQuery touch events, then reactivate them?

问题描述

对于移动设备，如何在等待JSON响应时暂时阻止网页上的 jQuery 触摸事件？

JSON响应将用于创建和更新页面上的内容，但是是其他元素的事件处理程序，我想禁用（或停止用户激活它们），直到JSON响应回来，我已经对页面内容进行了必要的调整。

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

（1）我考虑创建或激活覆盖div防止覆盖层元素上的jQuery事件侦听器检测触摸事件，但我找不到这样做的方法。

（2）方法我考虑是一个对象跟踪所有监听器，并在命令变成他们 .off（）然后一次JSON和调整已经完成，我可以重新附加他们 .on（'click'）然而，这似乎过多，如果我可以实现我想要的第一种方法。 p>

我正在寻找的是最支持的方式，这意味着将在Android，Windows Mobile和IOS上工作的

< blockquote>

演示

此步骤是可选的，但仍然可用于修改加载窗口小部件的默认值。

 下面的代码应该放在 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'：$窗口）.width（），
'margin'：0，
'padding-top'：150 //到中心旋转和文本
} 
 
 //显示加载微调框
 $ .mobile.loading（show）; 
 
 //删除边角
 $（'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）; 
  

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

解决方案

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");

这篇关于对于移动设备，我如何暂时阻止jQuery触摸事件，然后重新激活它们？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！