Disable any clicks on screen and enable it after some time or event

Question

I'm using PhoneGap and jQuery Mobile in my app. my problem is while I navigating from page A to the page B by one click everything is OK, but when I clicking double click on page A and passing to next screen (page B) that isnt visable to the user at that second... the second click is passed to the page B and page B try to do the action that was pressed in page A.

Any ideas how to disable any clicks on page B and activate it only after event or page loads for 100%?

Answer 1

Not specific to jQuery Mobile, but you can throw up a "click prevention" DIV to intercept any events you would rather not be handled.

Create a DIV with the following styles:

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;

Then when you need to prevent any interaction with the app, change that div's style from display:none to display:block. Voila, instant click prevention.

Of course, don't forget to remove it from the DOM or switch it back to display:none -- otherwise your user won't be able to interact with the app anymore.

Alternatively, if you can prevent the browser's default when processing the event, that works out pretty well too. Not sure how jQuery Mobile would do that, but it's easy on something like Hammer.js ( Hammer(element, {prevent_default: true}.on("tap", event_handler); ) If possible, this is the way I'd go, since it avoids touching the DOM (which might trigger reflow). But if you can't get it working any other way, the first method should work, even if a bit ugly.