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.