Nhấn đúp vào safari di động

Question

Có cách nào để liên kết với sự kiện nhấn đúp (trong một dòng mã) cho safari di động không? Hoặc, giải pháp thay thế là triển khai nó chặn hai sự kiện một lần xảy ra trong một thời gian ngắn nhất định (ví dụ: http://appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/)?

Answer 1

Câu trả lời ngắn: bạn phải triển khai thông qua hai lần nhấp.

câu trả lời thực tế: Đây là một thực hiện jQuery-miễn nhấp đúp cho safari di động mà chỉ cần một dòng mã (để cho phép dblclick sự kiện):

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

Ngoài ra, bạn có thể cần phải disable mobile Safari's default zoom với thẻ meta này:

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

Answer 2

Override dblclick sự kiện và sử dụng bind, live, on, delegate như đối với bất kỳ sự kiện khác:

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

Nếu bạn muốn có tác nhấp đúp chuột vào cả trên trình duyệt và nền tảng iOS, bạn nên có đoạn mã sau:

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); 
     } 
    } 
}; 

Hãy thử nó ở đây:

http://jsfiddle.net/UXRF8/