禁用屏幕上的任何点击，并在一段时间或事件后启用它

Question

我在我的应用中使用PhoneGap和jQuery Mobile。我的问题是，当我从第A页导航到第B页时，只需点击一下即可，但当我点击双击第A页时 并传递到下一个屏幕（页面B），在那一秒钟内用户无法看到...第二次点击传递到页面B ，页面B尝试执行按下的操作< strong>第A页。

任何想法如何禁用页面B上的任何点击并仅在事件或页面加载100％后激活它？

Answer 1

并非特定于jQuery Mobile，但您可以抛出“点击预防”DIV来拦截您不愿意处理的任何事件。

使用以下样式创建DIV：

position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
background-color: transparent;
z-index: 999999;
transform: translateZ(999999px);
display: none;

然后，当您需要阻止与应用的任何互动时，请将该div的样式从display:none更改为display:block。 Voila，即时点击预防。

当然，不要忘记将其从DOM中删除或将其切换回display:none - 否则您的用户将无法再与该应用进行互动。

或者，如果您在处理事件时可以阻止浏览器的默认设置，那么效果也很好。不知道jQuery Mobile会如何做到这一点，但是像Hammer.js（Hammer(element, {prevent_default: true}.on("tap", event_handler);）这样的东西很容易。如果可能的话，这就是我要去的方式，因为它避免了触摸DOM（可能会触发重排）。但如果你不能以任何其他方式使它工作，第一种方法应该有效，即使有点难看。