I'm doing fast click for mobile browser. When I fast click on link of current page, it does an ajax load to next page. My fast click script can stop the ghost click now. But if there is an input element on next page at click position on current page, it still get a focus and display virtual keyboard. How to prevent ghost focus event too?
I've been struggeling with this for a little while now, but only found a partial solution. Although I think it's good enough for my problem. Hopefully it will also be helpful to someone else.
This solution is based on jQuery mobile, but you might be able to do something similar if you don't use that.
What I do is, I place an empty div that fills the entire screen on top of other elements, so that it blocks (most) click/touch events.
<div id="ghostBuster" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:none;"></div>
I show it before I hide the page I'm changing from.
$("div[data-role='page']").on("pagebeforehide", function() {
$("#ghostBuster").show();
});
And hide it again once the next page is shown.
$("div[data-role='page']").on("pageshow", function() {
$("#ghostBuster").hide();
});
I've not tested it very thoroughly and only on my android device, but so far it seems to work for avoiding ghost clicks and focussing. It doesn't work for avoiding ghost clicking select boxes. And it doesn't work when the transition animation between the pages is very fast. I've solved the problem with select boxes by switching to the non-native alternative that jQuery mobile provides.
You might consider hiding the div again on mouseup, but that doesn't work in my case as I use swipes to change pages.
It's probably not the prettiest possible solution, but so far I've been unable to find or come up with a better one.