Doppio tocco sul safari mobile

Question

C'è un modo per associare un evento a doppio tocco (in una singola riga di codice) per il safari mobile? Oppure, l'alternativa è implementarla intercettando due eventi a tocco singolo avvenuti in un breve periodo di tempo (esempio: http://appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/)?

Answer 1

Risposta breve: è necessario implementare tramite due clic.

risposta reale: Ecco un'implementazione jQuery-libera di doppio tocco per Safari Mobile che richiede solo una riga di codice (per abilitare DblClick evento):

• https://gist.github.com/2927073

Inoltre, probabilmente avrai bisogno di disable mobile Safari's default zoom con questo meta-tag:

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

Answer 2

Override dblclick evento e utilizzare bind, live, on, delegate come per qualsiasi altro evento:

jQuery.event.special.dblclick = { 
    setup: function(data, namespaces) { 
     var elem = this, 
      $elem = jQuery(elem); 
     $elem.bind('touchend.dblclick', jQuery.event.special.dblclick.handler); 
    }, 

    teardown: function(namespaces) { 
     var elem = this, 
      $elem = jQuery(elem); 
     $elem.unbind('touchend.dblclick'); 
    }, 

    handler: function(event) { 
     var elem = event.target, 
      $elem = jQuery(elem), 
      lastTouch = $elem.data('lastTouch') || 0, 
      now = new Date().getTime(); 

     var delta = now - lastTouch; 
     if(delta > 20 && delta<500){ 
      $elem.data('lastTouch', 0); 
      $elem.trigger('dblclick'); 
     }else 
      $elem.data('lastTouch', now); 
    } 
}; 

Answer 3

Se si vuole avere di lavoro fare doppio clic sia sul browser e piattaforma iOS, si dovrebbe avere il seguente codice:

jQuery.event.special.dblclick = { 
    setup: function(data, namespaces) { 
     var agent = navigator.userAgent.toLowerCase(); 
     if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0 || agent.indexOf('ipod') >= 0) { 
      var elem = this, 
       $elem = jQuery(elem); 
      $elem.bind('touchend.dblclick', jQuery.event.special.dblclick.handler); 
     } else { 
      var elem = this, 
       $elem = jQuery(elem); 
      $elem.bind('click.dblclick', jQuery.event.special.dblclick.handler); 
     } 
    }, 
    teardown: function(namespaces) { 
     var agent = navigator.userAgent.toLowerCase(); 
     if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0 || agent.indexOf('ipod') >= 0) { 
      var elem = this, 
       $elem = jQuery(elem); 
      $elem.unbind('touchend.dblclick'); 
     } else { 
      var elem = this, 
       $elem = jQuery(elem); 
      $elem.unbind('click.dblclick', jQuery.event.special.dblclick.handler); 
     } 
    }, 
    handler: function(event) { 
     var elem = event.target, 
      $elem = jQuery(elem), 
      lastTouch = $elem.data('lastTouch') || 0, 
      now = new Date().getTime(); 
     var delta = now - lastTouch; 
     if (delta > 20 && delta < 500) { 
      $elem.data('lastTouch', 0); 
      $elem.trigger('dblclick'); 
     } else { 
      $elem.data('lastTouch', now); 
     } 
    } 
}; 

Provalo qui:

http://jsfiddle.net/UXRF8/