cordova - programar - phonegap tutorial
Corrección de velocidad: cómo eliminar el retraso de 300 ms en las aplicaciones móviles de jQuery (4)
Esto es trabajo para mí. Cada vez que se agrega una nueva página al dominio, podemos adjuntar un clic rápido a todos los enlaces ...
// when new pages are loaded into the DOM via JQM AJAX Nav, apply ko bindings to that page''s DOM
$(document).on(''pageinit'', ''.ui-page'', function (event, data)
{
var activePage = $(event.target).get(0);
FastClick.attach(activePage);
});
¿Cómo se elimina el retraso de clic / toque de Mobile Safari en iOS?
Me he movido un poco con los oyentes de los eventos y he usado un montón de scripts diferentes (como Lightning Touch ) para no alegrarme. Hay algunas soluciones que habrían funcionado, sin embargo, estos tipos de scripts obligan a codificar un elemento de destino a cada enlace en el DOM. Desafortunadamente, esto podría causar algunas transiciones rápidas y lentas, que no funcionarán para mí.
No puedo publicar un comentario directamente a la recomendación de MikeZ.
Lo usé con éxito, pero tuve que hacer algunos ajustes adicionales, especialmente para dispositivos Android.
En lugar de llamar a event.preventDefault(); en gonClick (), también tuve que llamar event.stopImmediatePropagation();
De lo contrario, es posible que tenga problemas, especialmente, cuando los elementos dinámicos, como los paneles, se abren encima del elemento en el que hizo clic.
Complete el método gonClick () para usar con la solución de MikeZ:
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();
event.stopImmediatePropagation();
}
}
};
Finalmente encontré la respuesta a mis problemas de velocidad después de una búsqueda incansable, y se presenta en forma de FastClick ( este hilo entra en gran detalle, junto con algunos ajustes en los comentarios de otros usuarios).
Incorpore el script FastClick.js, agregue el servicio de escucha onLoad y envuelva su contenido <body> en un lapso, y su aplicación debería comenzar a sentirse mucho más nativa.
OnLoad Listener: <body onLoad="initFastButtons();">
Envoltura Span:
<body onLoad="initFastButtons();">
<span id="fastclick">
[...]
</span>
</body>
FastClick.js
//======================================================== 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);
};
//========================================================
Ben Howdle creó recientemente un proyecto de código abierto Touche.js que aborda este problema de una manera bastante simple y elegante. Podría valer la pena ver a cualquiera que busque una solución a este problema.