0

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

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

我怎样才能防止这种情况？

（据我了解， stopImmediatePropagation 无济于事，因为这些是新的用户事件。）

谢谢

4

3 回答 3

1

要在整个页面上进行非活动点击，您可以使用透明 div 覆盖整个页面。虽然它可能被认为是一种边界黑客——这实际上会使用最少的 js 和 css！

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

为此，可以使用半透明灰色作为叠加层，或者像我在下面所做的那样，显示加载消息。

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

我做了一个jsfiddle ，希望能解决问题。

在这里，我制作了一个 id 为“inactivator”的 div，它具有上面讨论的属性。我还制作了一个 ID 为“inactivate”的按钮，我已将 jQuery 的显示功能委托给该按钮。我还冒昧地添加了 jQuery Mobile 的默认加载消息以同时显示，只是为了提供应用程序思考的视觉指示（所以它不会被误认为是滞后）。

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

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

于 2012-06-21T03:38:34.513 回答
0

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

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

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

$('#YourButton').removeClass('ui-disabled');
于 2012-06-11T07:21:47.050 回答
0

所以我花了一段时间才弄明白......你必须从委托函数中返回 FALSE 才能让父元素忽略该事件。下面的 return 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!
}
于 2012-07-03T10:56:37.077 回答