jquery - sim - http www.icloud.com activation lock

El problema de activación del iPad/iPhone hace que el usuario haga doble clic en un enlace

Question

Tengo algunos sitios web que construí hace mucho tiempo, que usan eventos de mouse jquery ... Acabo de obtener un ipad y noté que todos los eventos de mouse over se traducen en clics ... así que, por ejemplo, tengo que hacer dos clics en lugar de uno .. (el primer vuelo estacionario, que el clic real)

¿hay alguna solución para resolver esto? tal vez un comando jquery que debería haber usado en lugar de mouseover / out, etc. ¡gracias!

Answer 1

"Pienso" que sus enlaces no tienen evento onmouseover, donde 1 toque se activa en el uso y el doble toque activa el enlace. pero idk. No tengo un iPad. Creo que tienes que usar eventos de gesto / toque.

https://developer.apple.com/documentation/webkitjs

Answer 2

Con la inspiración de MacFreak, armé algo que funciona para mí.

Este método js evita que el "hover" se adhiera a un iPad, y evita que el clic se registre como dos clics en algunos casos. En CSS, si tiene alguna: hover clases de psudo en su css, cámbielas a .hover Por ejemplo .some-class: hover a .some-class.hover

Pruebe este código en un ipad para ver cómo el método de desplazamiento css y js se comporta de manera diferente (solo en el efecto de desplazamiento). El botón CSS no tiene una elegante alerta de clic. http://jsfiddle.net/bensontrent/ctgr6stm/

function clicker(id, doStuff) {
  id.on(''touchstart'', function(e) {
    id.addClass(''hover'');
  }).on(''touchmove'', function(e) {
    id.removeClass(''hover'');
  }).mouseenter(function(e) {
    id.addClass(''hover'');
  }).mouseleave(function(e) {
    id.removeClass(''hover'');
  }).click(function(e) {
    id.removeClass(''hover'');
    //It''s clicked. Do Something
    doStuff(id);
  });
}

function doStuff(id) {
  //Do Stuff
  $(''#clicked-alert'').fadeIn(function() {
    $(this).fadeOut();
  });
}
clicker($(''#unique-id''), doStuff);

button {
  display: block;
  margin: 20px;
  padding: 10px;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.hover {
  background: yellow;
}
.btn:active {
  background: red;
}
.cssonly:hover {
  background: yellow;
}
.cssonly:active {
  background: red;
}
#clicked-alert {
  display: none;
}

<button id="unique-id" class="btn">JS Hover for Mobile devices<span id="clicked-alert"> Clicked</span>

</button>
<button class="cssonly">CSS Only Button</button>
<br>This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks. In CSS, if you have any :hover in your css, change them to .hover For example .some-class:hover to .some-class.hover

Answer 3

Creo que sería conveniente probar mouseenter en lugar de mouseover . Es lo que se usa internamente cuando se vincula a .hover(fn,fn) y generalmente es lo que quieres.

Answer 4

Este breve fragmento parece funcionar. Dispare el evento de clic cuando se toca el enlace:

  $(''a'').on(''touchstart'', function() {
    $(this).trigger(''click'');
  });

Answer 5

Estoy demasiado tarde, lo sé, pero esta es una de las soluciones más fáciles que he encontrado:

    $(''body'').on(''touchstart'',''*'',function(){   //listen to touch
        var jQueryElement=$(this);  
        var element = jQueryElement.get(0); // find tapped HTML element
        if(!element.click){
            var eventObj = document.createEvent(''MouseEvents'');
            eventObj.initEvent(''click'',true,true);
            element.dispatchEvent(eventObj);
        }
    });

Esto no solo funciona para enlaces (etiquetas de anclaje) sino también para otros elementos. Espero que esto ayude.

Answer 6

La respuesta de MacFreak fue extremadamente útil para mí. Aquí hay un código práctico en caso de que lo ayude.

PROBLEMA : aplicar touchend significa que cada vez que pasa el dedo por un elemento, responde como si lo hubiera presionado, incluso si solo estaba intentando pasar.

Estoy creando un efecto con jQuery que se desvanece una línea debajo de algunos botones para "resaltar" el botón fijo. No quiero que esto signifique que debes presionar el botón dos veces en los dispositivos táctiles para seguir el enlace.

Aquí están los botones:

<a class="menu_button" href="#">
    <div class="menu_underline"></div>
</a>

Quiero que el div "menu_underline" se desvanezca al pasar el mouseover y desaparecer en mouseout. PERO deseo que los dispositivos táctiles puedan seguir el enlace con un solo clic, no con dos.

SOLUCIÓN - Aquí está el jQuery para que funcione:

//Mouse Enter
$(''.menu_button'').bind(''touchstart mouseenter'', function(){
    $(this).find(".menu_underline").fadeIn();
});

//Mouse Out   
$(''.menu_button'').bind(''mouseleave touchmove click'', function(){
    $(this).find(".menu_underline").fadeOut();
});

Muchas gracias por su ayuda en este MacFreak.

Answer 7

La solución de cduruk fue bastante efectiva, pero causó problemas en algunas partes de mi sitio. Como ya estaba usando jQuery para agregar la clase de desplazamiento de CSS, la solución más sencilla fue simplemente no agregar la clase de desplazamiento de CSS en dispositivos móviles (o más precisamente, SÓLO agregarlo cuando NO está en un dispositivo móvil).

Aquí estaba la idea general:

var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/);

if (!(ios)) {
    $(".portfolio-style").hover(
        function(){
            $(this).stop().animate({opacity: 1}, 100);
            $(this).addClass("portfolio-red-text");
        },
        function(){
            $(this).stop().animate({opacity: 0.85}, 100);
            $(this).removeClass("portfolio-red-text");
        }
    );
}

* código reducido para fines ilustrativos

Answer 8

Lo que funcionó para mí es lo que otros aquí ya han dicho:

No mostrar / ocultar elementos en el mouse o mousemove (que es el evento en mi caso).

Esto es lo que dice Apple ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html ):

Un elemento seleccionable es un enlace, un elemento de formulario, un área de mapa de imagen o cualquier otro elemento con mousemove, mousedown, mouseup o onclick handlers.

Si el usuario toca un elemento en el que se puede hacer clic, los eventos llegan en este orden: mouseover, mousemove, mousedown, mouseup y click. Además, si el contenido de la página cambia en el evento mousemove, no se envían eventos posteriores en la secuencia. Este comportamiento le permite al usuario tocar el nuevo contenido.

Por lo tanto, podría usar la solución de @ woop: detectar el userAgent, verificar si es y el dispositivo iOS y luego vincular el evento. Terminé usando esta técnica porque se adapta a mis necesidades y tiene más sentido no enlazar eventos de vuelo estacionario cuando no lo desea.

Pero ... si no quieres meterse con UserAgents y aún ocultar / mostrar elementos en el mouse / mousemove, descubrí que puedes hacerlo usando JavaScript nativo, como este:

$("body").on("mouseover", function() {
       document.getElementsByTagName("my-class")[0].style.display = ''block''; //show element
       document.querySelector(".my-selector div").style.display = ''none''; // hide element
});

Esto funcionará en la versión de escritorio y no hará nada en la versión móvil.

Y por un poco más de compatibilidad ...

$("body").on("mouseover", function() {
   if (document.getElementsByTagName && document.querySelector) { // check compatibility
       document.getElementsByTagName("my-class")[0].style.display = ''block''; //show element
       document.querySelector(".my-selector div").style.display = ''none''; // hide element
    } else {
        $(".my-class").show();
        $(".my-selector div").hide();
    }
});

Answer 9

Me acabo de enterar de que funciona si agregas un oyente vacío, no me preguntes por qué, pero lo probé en iPhone y iPad con iOS 9.3.2 y funcionó bien.

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    var elements = document.getElementsByTagName(''a'');
    for(var i = 0; i < elements.length; i++){
        elements[i].addEventListener(''touchend'',function(){});
    }
}

Answer 10

Me encontré con una situación similar en la que tuve eventos vinculados al mouseenter / mouseleave / click estados de un elemento, sin embargo, en un iPhone, el usuario tuvo que hacer doble clic en el elemento para activar primero el evento mouseenter, luego nuevamente para iniciar el evento click .

Resolví esto utilizando un método similar al anterior, pero utilicé el complemento jQuery $ .browser (para jQuery 1.9>) y agregué un evento .trigger al evento vinculante de mouseenter, de la siguiente manera:

// mouseenter event
$(''.element'').on( "mouseenter", function() {
    // insert mouseenter events below

    // double click fix for iOS and mouseenter events
    if ($.browser.iphone || $.browser.ipad) $(this).trigger(''click'');
});
// mouseleave event
$(''.element'').on( "mouseleave", function() { 
    // insert mouseout events below
});
// onclick event
$(''.element'').on( "click", function() {
    // insert click events below
});

El .trigger evita la necesidad de hacer doble clic en el elemento activando el controlador de eventos .click al mouseenter (o el clic inicial) del elemento cuando se ve en iPhones o iPads. Puede que no sea la solución más elegante, pero funciona muy bien en mi caso y utiliza un complemento que ya tenía instalado, y me exigió que añadiera una sola línea de código para que mis eventos existentes funcionen bajo estos dispositivos.

Puede obtener el complemento jQuery $ .browser aquí: https://github.com/gabceb/jquery-browser-plugin

Answer 11

Ninguno de la otra respuesta funciona para mí. Mi aplicación tiene muchos oyentes de eventos, casillas de verificación y enlaces que tienen oyentes y enlaces sin oyentes.

Yo uso esto:

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
    if ($(this).data("touched") === true) {
        e.stopImmediatePropagation();
        return false;
    }
    return;
}).on("touchend", selector, function (e) {
    if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
        // user action is not a tap
        return;
    var $this = $(this);
    // Visit: http://.com/questions/1694595/can-i-call-jquery-click-to-follow-an-a-link-if-i-havent-bound-an-event-hand/12801548#12801548
    this.click();
    // prevents double click
    $this.data("touched", true);
    if (timer)
        clearTimeout(timer);
    setTimeout(function () {
        $this.data("touched", false);
    }, 400);
    e.stopImmediatePropagation();
    return false;
}).on("touchstart", function (e) {
    startX = e.originalEvent.changedTouches[0].screenX;
    startY = e.originalEvent.changedTouches[0].screenY;
});

Answer 12

No está del todo claro cuál es su pregunta, pero si solo quiere eliminar el doble clic, mientras retiene el efecto de desplazamiento para el mouse, mi consejo es:

• Agregue efectos de touchstart en touchstart y mouseenter .
• Elimine los efectos de mouseleave en mouseleave , touchmove y click .

Fondo

Para simular un mouse, los navegadores como Webkit mobile activan los siguientes eventos si un usuario toca y suelta un dedo en la pantalla táctil (como iPad) (fuente: Touch And Mouse en html5rocks.com):

1. touchstart
2. touchmove
3. touchend
4. Retraso de 300 ms, donde el navegador se asegura de que se trata de un solo toque, no un doble toque
5. mouseover
6. mouseenter
   • Nota : Si un evento mouseover , mouseenter o mousemove cambia el contenido de la página, los siguientes eventos nunca se disparan.
7. mousemove
8. mousedown
9. mouseup
10. click

No parece posible simplemente decirle al navegador web que se salte los eventos del mouse.

Lo que es peor, si un evento mouseover cambia el contenido de la página, el evento click nunca se activa, tal como se explica en Safari Web Content Guide - Manejo de eventos , en particular la figura 6.4 en One-Finger Events . Lo que es exactamente un "cambio de contenido" dependerá del navegador y la versión. He descubierto que para iOS 7.0, un cambio en el color de fondo no es (¿o ya no es más?) Un cambio de contenido.

Solución explicada

Recordar:

• Agregue efectos de touchstart en touchstart y mouseenter .
• Elimine los efectos de mouseleave en mouseleave , touchmove y click .

Tenga en cuenta que no hay ninguna acción en touchend !

Esto funciona claramente para eventos de mouse: mouseenter y mouseleave (versiones ligeramente mejoradas de mouseover y mouseout ) se disparan, y agregan y eliminan el elemento emergente.

Si el usuario realmente hace click un enlace, también se elimina el efecto de desplazamiento. Esto asegura que se elimine si el usuario presiona el botón Atrás en el navegador web.

Esto también funciona para eventos táctiles: en touchstart el efecto de touchstart . No se '''' ''elimina'' ''en touchend . Se vuelve a mouseenter en el mouseenter y, dado que esto no provoca cambios en el contenido (ya se agregó), también se mouseenter el evento click y se sigue el enlace sin necesidad de que el usuario vuelva a hacer clic.

La demora de touchstart tiene un navegador entre un evento de touchstart y un click realmente se usa porque el efecto de desplazamiento se mostrará durante este corto tiempo.

Si el usuario decide cancelar el clic, un movimiento del dedo lo hará igual de normal. Normalmente, esto es un problema ya que no se mouseleave ningún evento mouseleave , y el efecto de mouseleave permanece en su lugar. Afortunadamente, esto se puede solucionar fácilmente eliminando el efecto de touchmove sobre el touchmove .

¡Eso es!

Tenga en cuenta que es posible eliminar el retraso de 300 ms , por ejemplo, utilizando la biblioteca de FastClick , pero esto está fuera del alcance de esta pregunta.

Soluciones alternativas

He encontrado los siguientes problemas con las siguientes alternativas:

• detección de navegador: extremadamente propenso a errores. Asume que un dispositivo tiene mouse o touch, mientras que una combinación de ambos se volverá cada vez más común cuando touch exhiba prolifirate.
• Detección de medios CSS: la única solución exclusiva de CSS que conozco. Todavía es propenso a errores y aún asume que un dispositivo tiene mouse o touch, mientras que ambos son posibles.
• Emule el evento click en touchend : Esto seguirá incorrectamente el enlace, incluso si el usuario solo quería desplazarse o hacer zoom, sin la intención de hacer clic en el enlace.
• Use una variable para suprimir los eventos del mouse: esto establece una variable en touchend que se usa como condición if en eventos de mouse posteriores para evitar cambios de estado en ese momento. La variable se restablece en el evento click. Esta es una solución decente si realmente no desea un efecto de desplazamiento sobre las interfaces táctiles. Desafortunadamente, esto no funciona si se dispara un touchend por otro motivo y no se touchend ningún clic (por ejemplo, el usuario desplazado o ampliado), y posteriormente intenta seguir el enlace con un mouse (es decir, en un dispositivo con mouse y touch interfaz).

Otras lecturas

• http://jsfiddle.net/macfreek/24Z5M/ . Pruebe la solución anterior para usted mismo en esta caja de arena.
• http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser . Esta misma respuesta, con un poco más de fondo.
• http://www.html5rocks.com/en/mobile/touchandmouse/ . Gran artículo de fondo sobre html5rocks.com sobre el tacto y el mouse en general.
• https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html . Guía de contenido web de Safari: manejo de eventos. Ver en particular la figura 6.4, que explica que no se disparan más eventos después de un cambio de contenido durante un evento mouseover o mousemove .

Consulte también el problema de doble clic en iPad / iPhone y Deshabilite los efectos de desplazamiento en navegadores móviles .

Answer 13

No hay necesidad de complicar demasiado.

$(''a'').on(''touchend'', function() {
    $(this).click();
});

Answer 14

No lo he probado completamente, pero dado que iOS activa eventos táctiles, esto podría funcionar, suponiendo que se encuentre en una configuración de jQuery.

$(''a'').on(''click touchend'', function(e) {
    var el = $(this);
    var link = el.attr(''href'');
    window.location = link;
});

La idea es que Mobile WebKit active un evento de touchend al final de un toque, así que escuchamos eso y luego redirigimos el navegador tan pronto como un evento de touchend se ha touchend en un enlace.

Answer 15

Para que los enlaces funcionen sin interrumpir el desplazamiento táctil, resolví esto con el evento "toque" de jQuery Mobile:

    $(''a'').not(''nav.navbar a'').on("tap", function () {
        var link = $(this).attr(''href'');
        if (typeof link !== ''undefined'') {
            window.location = link;
        }
    });

Answer 16

Parece que hay una solución CSS después de todo. La razón por la cual Safari espera un segundo toque es por la imagen de fondo (o elementos) que usualmente asigna en el evento: hover. Si no se muestra ninguno, no tendrá ningún problema. La solución es apuntar a la plataforma iOS con un archivo CSS secundario (o estilo en el caso de un enfoque JS) que anula: fondo de desplazamiento para heredar, por ejemplo, y mantener ocultos los elementos que iba a mostrar al pasar el mouse:

Aquí hay un ejemplo de CSS y HTML: un bloque de producto con una etiqueta con estrella sobre el mouse sobre:

HTML:

<a href="#" class="s"><span class="s-star"></span>Some text here</a>

CSS:

.s {
   background: url(some-image.png) no-repeat 0 0;

}
.s:hover {
   background: url(some-image-r.png) no-repeat 0 0;
}

.s-star {
   background: url(star.png) no-repeat 0 0;
   height: 56px;
   position: absolute;
   width: 72px;
   display:none;
}

.s:hover .s-star {
   display:block;
}

Solución (CSS secundario):

/* CSS */
/* Keep hovers the same or hidden */
.s:hover {
   background:inherit;
}
.s:hover .s-star {
   display:none;
}

Answer 17

Puede consultar navigator.userAgent así:

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
    //bind your mouseovers...
}

pero tendrías que buscar moras, droides u otros dispositivos táctiles. También podría enlazar los mouseover solo si el userAgent contiene Mozilla, IE, Webkit u Opera, pero aún necesita pantallas para algunos dispositivos porque el Droid, por ejemplo, informa su cadena userAgent como:

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

La cadena del iPhone es similar. Si solo hace una pantalla para iPhone, iPod, iPad, Android y Blackberry, es posible que obtenga la mayoría de las computadoras de mano, pero no todas.

Answer 18

Puede usar click touchend ,

ejemplo:

$(''a'').on(''click touchend'', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr(''href'');
    window.location = linkToAffectHref;
});

El ejemplo anterior afectará a todos los enlaces en dispositivos táctiles.

Si desea orientar solo los enlaces específicos, puede hacer esto configurando una clase en ellos, es decir:

HTML:

<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>

Jquery:

$(''a.prevent-extra-click'').on(''click touchend'', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr(''href'');
    window.location = linkToAffectHref;
});

Aclamaciones,

Jeroen

Answer 19

Si usa Modernizr, es muy fácil usar Modernizr.touch como se mencionó anteriormente.

Sin embargo, prefiero usar una combinación de Modernizr.touch y pruebas de agente de usuario, solo para estar seguro.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

Si no utiliza Modernizr, puede simplemente reemplazar la función Modernizr.touch anterior con (''ontouchstart'' in document.documentElement)

También tenga en cuenta que probar el agente de usuario iemobile le dará una gama más amplia de dispositivos móviles detectados de Microsoft que Windows Phone.

Answer 20

Simplemente haga una consulta de medios CSS que excluya tabletas y dispositivos móviles y coloque el elemento emergente allí. Realmente no necesitas jQuery o JavaScript para esto.

@media screen and (min-device-width:1024px) {
    your-element:hover {
        /* Do whatever here */
    }
}

Y asegúrese de agregar esto a su cabezal html para asegurarse de que se calcula con los píxeles reales y no con la resolución.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Answer 21

Solo una mejora para evitar la redirección cuando deslizas el dedo sobre un enlace por error.

// tablet "one touch (click)" X "hover" > link redirection
$(''a'').on(''touchmove touchend'', function(e) {

    // if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
    if (e.type == ''touchmove'') {
        $.data(this, "touchmove_cancel_redirection", true );
        return;
    }

    // if it''s a simple touchend, data() for this element doesn''t exist.
    if (e.type == ''touchend'' && !$.data(this, "touchmove_cancel_redirection")) {
        var el = $(this);
        var link = el.attr(''href'');
        window.location = link;
    }

    // if touchmove>touchend, to be redirected on a future simple touchend for this element
    $.data(this, "touchmove_cancel_redirection", false );
});

Answer 22

Tuve el mismo problema pero no en un dispositivo táctil. El evento se activa cada vez que hace clic. Hay algo acerca de la cola de eventos más o menos.

Sin embargo, mi solución fue la siguiente: al hacer clic en evento (¿o tocar?) Configura un temporizador. Si se vuelve a hacer clic en el enlace dentro de X ms, simplemente devuelve falso.

Para establecer el temporizador por elemento, puede usar $.data() .

Esto también puede solucionar el problema @Ferdy descrito anteriormente.

Answer 23

Tuve los siguientes problemas con las soluciones existentes y encontré algo que parece resolverlos todos. Esto supone que está buscando algo que se cruce entre navegador, dispositivo cruzado y no quiere que el dispositivo detecte.

Los problemas que esto soluciona

Usando solo touchstart o touchend :

• Hace que el evento se desencadene cuando las personas intentan desplazarse más allá del contenido y simplemente pasan el dedo sobre este elemento cuando comienzan a deslizar, lo que provoca la acción inesperadamente.
• Puede provocar que el evento se active con longpress , similar al clic derecho en el escritorio. Por ejemplo, si su evento de clic va a la URL X, y el usuario pulsa prolongadamente para abrir X en una nueva pestaña, el usuario se confundirá al encontrar X abierta en ambas pestañas. En algunos navegadores (por ejemplo, iPhone), incluso puede evitar que aparezca el menú de pulsación larga.

touchstart eventos de mouseover en touchstart y mouseout en touchmove tiene consecuencias menos serias, pero interfiere con el comportamiento habitual del navegador, por ejemplo:

• Una pulsación larga provocaría un mouseover que nunca termina.
• Muchos navegadores de Android tratan la ubicación del dedo en el touchstart como un mouseover , que se mouseout en el touchstart en la siguiente entrada touchstart . Una forma de ver el contenido del mouseover en Android es, por lo tanto, tocar el área de interés y mover el dedo, desplazando la página ligeramente. El tratamiento de touchmove como mouseout rompe esto.

La solución

En teoría, puedes simplemente agregar una bandera con touchmove , pero los iPhones disparan el movimiento incluso si no hay movimiento. En teoría, puede comparar los eventos pageX y pageY pageX y pageY pero en iPhones, no hay touchend pageX ni pageY .

Desafortunadamente, cubrir todas las bases termina siendo un poco más complicado.

$el.on(''touchstart'', function(e){
    $el.data(''tstartE'', e);
    if(event.originalEvent.targetTouches){
        // store values, not reference, since touch obj will change
        var touch = e.originalEvent.targetTouches[0];
        $el.data(''tstartT'',{ clientX: touch.clientX, clientY: touch.clientY } );
    }
});
$el.on(''touchmove'', function(e){
    if(event.originalEvent.targetTouches){
        $el.data(''tstartM'', event.originalEvent.targetTouches[0]);
    }
});

$el.on(''click touchend'', function(e){
    var oldE = $el.data(''tstartE'');
    if( oldE && oldE.timeStamp + 1000 < e.timeStamp ) {
        $el.data(''tstartE'',false);
        return;
    }
    if( $el.data(''iosTouchM'') && $el.data(''tstartT'') ){
        var start = $el.data(''tstartT''), end = $el.data(''tstartM'');
        if( start.clientX != end.clientX || start.clientY != end.clientY ){
            $el.data(''tstartT'', false);
            $el.data(''tstartM'', false);
            $el.data(''tstartE'',false);
            return;
        }
    }
    $el.data(''tstartE'',false);

En teoría, hay formas de obtener el tiempo exacto utilizado para una pulsación larga en lugar de solo usar 1000 como aproximación, pero en la práctica no es tan simple y es mejor usar un proxy razonable .