StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I <em>finally</em> found the answer to my speed woes after tireless searching, and it comes in the form of FastClick (<a href="http://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile" rel="noreferrer">this thread</a> goes into great detail, along with some tweaks in the comments from other users).</p> <p>Incorporate the FastClick.js script, add the onLoad listener, and wrap your <code><body></code> content in a span, and your app should start feeling much more native.<br> <br> <br></p> <p><strong>onLoad Listener:</strong> <code><body onLoad="initFastButtons();"></code></p> <p><strong>Span Wrap:</strong></p> <pre><code><body onLoad="initFastButtons();"> <span id="fastclick"> [...] </span> </body> </code></pre> <p><strong>FastClick.js</strong></p> <pre><code>//======================================================== FASTCLICK function FastButton(element, handler) { this.element = element; this.handler = handler; element.addEventListener('touchstart', this, false); }; FastButton.prototype.handleEvent = function(event) { switch (event.type) { case 'touchstart': this.onTouchStart(event); break; case 'touchmove': this.onTouchMove(event); break; case 'touchend': this.onClick(event); break; case 'click': this.onClick(event); break; } }; FastButton.prototype.onTouchStart = function(event) { event.stopPropagation(); this.element.addEventListener('touchend', this, false); document.body.addEventListener('touchmove', this, false); this.startX = event.touches[0].clientX; this.startY = event.touches[0].clientY; isMoving = false; }; FastButton.prototype.onTouchMove = function(event) { if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) { this.reset(); } }; FastButton.prototype.onClick = function(event) { this.reset(); this.handler(event); if(event.type == 'touchend') { preventGhostClick(this.startX, this.startY); } }; FastButton.prototype.reset = function() { this.element.removeEventListener('touchend', this, false); document.body.removeEventListener('touchmove', this, false); }; function preventGhostClick(x, y) { coordinates.push(x, y); window.setTimeout(gpop, 2500); }; function gpop() { coordinates.splice(0, 2); }; function gonClick(event) { for(var i = 0; i < coordinates.length; i += 2) { var x = coordinates[i]; var y = coordinates[i + 1]; if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { event.stopPropagation(); event.preventDefault(); } } }; document.addEventListener('click', gonClick, true); var coordinates = []; function initFastButtons() { new FastButton(document.getElementById("fastclick"), goSomewhere); }; function goSomewhere() { var theTarget = document.elementFromPoint(this.startX, this.startY); if(theTarget.nodeType == 3) theTarget = theTarget.parentNode; var theEvent = document.createEvent('MouseEvents'); theEvent.initEvent('click', true, true); theTarget.dispatchEvent(theEvent); }; //======================================================== </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload