javascript - tactil - no funciona el touch de mi iphone 5
Detecte doble toque en la pantalla del ipad o iphone usando javascript (10)
Detectar doble toque
prueba el siguiente fragmento en un dispositivo táctil
event.preventDefault()
deshabilitará el toque doble zoom en div#double-tap
document.getElementById("double-tap").addEventListener("touchstart", tapHandler);
var tapedTwice = false;
function tapHandler(event) {
if(!tapedTwice) {
tapedTwice = true;
setTimeout( function() { tapedTwice = false; }, 300 );
return false;
}
event.preventDefault();
//action on double tap goes below
alert(''You tapped me Twice !!!'');
}
div#double-tap {
height: 50px;
width: 200px;
border: 1px solid black;
background-color: lightblue;
line-height: 50px;
text-align: center;
margin: 50px auto;
}
<div id="double-tap">Double Tap Me !!!</div>
Me gustaría detectar si un usuario ha pulsado dos veces en un iPad o iPhone.
¿Existe un evento javascript que proporcionaría esta funcionalidad?
Creé este en JavaScript y parece funcionar bien. (Lo probé en mi iPad 2). Es básicamente el código de lo que se dice arriba.
var clickTimer = null;
function touchStart() {
if (clickTimer == null) {
clickTimer = setTimeout(function () {
clickTimer = null;
alert("single");
}, 500)
} else {
clearTimeout(clickTimer);
clickTimer = null;
alert("double");
}
}
El doble toque en un iPad es complicado porque el navegador, de forma predeterminada, absorbe este evento como un evento de "zoom", como se ve aquí:
Sin embargo, si cancela el comportamiento predeterminado, puede capturar el doubletap usted mismo. Aquí hay un ejemplo de un complemento que hace esto por usted: el complemento jQuery doubletap .
El jquery.doubletap de Technoweenie lo hace y este enlace: los eventos móviles de jQuery finalmente lanzados parecen ser capaces de resolver la tarea ...
Encontré esta solución en en algún lugar pero olvidé qué publicación exacta. Funciona para un doble clic en un navegador y doble toque en el iPhone.
Uso ''touchend click''
para detectar el doble clic tanto en el navegador como en el iPhone. Para implementar solo en iPhone, elimine el clic.
var timeout;
var lastTap = 0;
$(''element'').on(''touchend click'',function(e){
var currentTime = new Date().getTime();
var tapLength = currentTime - lastTap;
e.preventDefault();
clearTimeout(timeout);
if(tapLength < 500 && tapLength > 0){
//Double Tap/Click
}else{
//Single Tap/Click
timeout = setTimeout(function(){
//Single Tap/Click code here
clearTimeout(timeout);
}, 500);
}
lastTap = currentTime;
});
Esto podría ser utilizado para un doble toque o un doble clic. En javascript puro:
var mylatesttap;
function doubletap() {
var now = new Date().getTime();
var timesince = now - mylatesttap;
if((timesince < 600) && (timesince > 0)){
// double tap
}else{
// too much time to be a doubletap
}
mylatesttap = new Date().getTime();
}
Podría usar la biblioteca móvil de jQuery para construir su aplicación: http://jquerymobile.com/ ; tiene muchos eventos táctiles incorporados. También puedes probar jQuery touch library: http://jqtouch.com/
También puede usar jquery.finger que admite eventos delegados .
Una idea básica es hacerlo así:
Para crear un evento de doble toque (o doble clic) necesita crear código en el evento
onClick
.La razón por la que lo más probable es que desee hacer doble clic / clic es porque ya tiene algo adjunto al evento
onClick
y necesita un gesto diferente en el mismo elemento.Esto significa que su evento
onClick
solo debe iniciar el eventoonClick
después de que sesetTimeout()
unsetTimeout()
.Así que el código básico iniciaría la función adjunta al evento
onClick
usando unsetTimeout()
. El primer clic dice "Iniciar el temporizador + ejecutar la función usandosetTimeout()
después de decir. 500 milisegundos. La segunda vez que haga clic, verificará si el segundo clic estuvo dentro de un período de tiempo específico para contar como un doble toque. Por lo tanto, si la hora desetTimeout()
era inferior a 500 milisegundos, cancelaríasetTimeout()
utilizandoclearTimeout()
y luegoclearTimeout()
una función completamente diferente (la función que quería iniciar para doble pestaña / clic)¿Deteniendo la acción por defecto? - Probablemente algo como
stopPropagation()
ocancelBubble()
haría el truco. Honestamente, no lo sé, pero ahí es donde empezaría a investigar.
basado en los últimos documentos de jquery, implementación de doble toque