Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mobile fast click - prevent ghost focus

Tags:

jquery

mobile

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?

like image 504
StoneHeart Avatar asked Oct 25 '12 08:10

StoneHeart


2 Answers

To prevent actions related to an event, use .stopImmediatePropagation() and preventDefault().

Working Demo

  • stopImmediatePropagation() - Handlers within the same function where it is call, will be executed normally, but will immediately neglect/stop any actions within other functions related to the same event. For example:
// alert will fire
$(document).on('click', '#foo', function(event) {
 event.stopImmediatePropagation();
 alert('Hello world');
});

// but this will be stopped
$(document).on('click', '#foo', function(event) {
 console.log('I am stopped!');
});

  • preventDefault() - When called, default action will be neglected. For example
<a href="http://www.google.com" id="foo">Google it!</a>

The link will be halted, but an alert will fire

$(document).on('click', '#foo', function(event) {
 event.preventDefault();
 alert('I prefer MSN');
});

Both should be combined together in order to stop events from bubbling up the DOM tree.

I made a Demo to explain the differences between both and why both should be combined together.

Based on the above, your code should look like this.

$(document).on('click', '.selector', function (event) {
 event.stopImmediatePropagation();
 event.preventDefault();
});

I hope this helps.

like image 74
Omar Avatar answered Oct 19 '22 09:10

Omar


I'm using fastclick.js. Here's my way to prevent auto trigger on next page:

Global CSS:

#preventClick { width:100%; height:100%; position:absolute; z-index:1000; top:0; left:0; }

HTML on next page:

<body>
    <div id="preventClick"></div>
    <!-- button on the same coordinate with previous page -->
</body>

Script on next page:

function onDeviceReady() {
    setTimeout(function(){ $('#preventClick').hide(); }, 300);
}

300 is the minimum and no point putting more than that

like image 2
Coisox Avatar answered Oct 19 '22 07:10

Coisox