Question

我正在使用jQuery Mobile和PhoneGap创建一个应用程序。

我在“tap”上“委托”一个按钮来执行一些繁重的处理并显示一个加载微调器。如果用户继续点按我的应用程序，则在繁重的处理完成后，点按按顺序排队并由应用程序处理 - 最后点击不需要的内容。

如何防止这种情况？

（据我所知，stopImmediatePropagation没有帮助，因为这些是新的用户事件。）

由于

Answer 1

要在整个页面上无效点击，您可以使用透明div覆盖整个页面。虽然它可能被认为是临界黑客 - 这实际上将使用最小的js和CSS！

需要注意的是，它不会给出任何视觉指示，表明该页面已被停用。

为此，可以使用半透明灰色作为叠加层，或者如下所示，显示加载消息。

首先，一个小的CSS讨论：
使div覆盖整页设置宽度和高度100％。要正确定位，请使用position：absolute，对于透明背景，请使用rgba background-color属性（请参阅下文）。您还应该声明一个z-index（如果需要可以增加）以确保它在其他所有内容之上，并使用-webkit-tap-highlight-color属性删除tap-callout。将显示设置为无，然后在繁重的工作期间显示。

我做了jsfiddle which hopefully clears things up。

这里我创建了一个id为“inactivator”的div，它具有上面讨论的属性。我还制作了一个id为“inactivate”的按钮，我已经委托了jQuery的show函数。我还冒昧地添加了jQuery Mobile的默认加载消息，以便同时显示应用程序思维的可视指示器（因此它不会被误认为是延迟）。

这里我添加了一个超时功能，以便加载消息和“inactivator”在5秒后隐藏。显然，在你的情况下，相同的代码应该在完成“重处理”而不是在五秒之后被触发。

（新的，额外的答案，因为我没有正确理解这个问题，但旧答案仍然可能对其他人有帮助。）

Answer 2

我能想到的最简单的方法是在你的javascript函数开始时取消激活按钮，然后在合适的时候重新激活它：

$('#YourButton').addClass('ui-disabled');

在您的功能结束时（或者当您希望它再次激活时：

$('#YourButton').removeClass('ui-disabled');

Answer 3

所以我花了一段时间来弄清楚...你必须从父元素的委托函数返回FALSE来忽略该事件。下面的返回假行修复了我的问题：

$(document).delegate("#finish", "tap", onFinish);

var onFinish = function() {
    $.mobile.loadingMessage = "Finishing...";
    $.mobile.showPageLoadingMsg();

    setTimeout(function(){  
        HEAVYPROCESSING();
        $.mobile.changePage($("#choosearticle"));
        }, 50);

    return false; // important - stops the two click fall through problem!
}

jqm忙时停止点击事件排队

3 个答案: