Phonegap 2.4.0 với Android 4.2 - hành vi nhấp đúp lạ

Question

Tôi đang sử dụng phonegap 2.4.0 để tạo ứng dụng Android và iOS.

Bây giờ, tôi nhận ra rằng sự kiện onclick trong liên kết được kích hoạt hai lần bên trong Ứng dụng Android bằng Android 4.2.2 trên thiết bị Nexus 4, giống như nhấp đúp (althoug tôi đã khai thác nó một lần!).

<a href="#" onclick="$(this).append('test'); return false;" style="some styles...">some text</a> 

libs trong sử dụng:

• jquery 1.9.1
• jquery di động 1.3.0 (rc)
• jquery ui 1.10.0
• jquery lạc đấm 0.2.2
• phonegap 2.4.0

Sau khi tôi nhấp (hoặc khai thác) liên kết trên Nexus 4 của tôi (Android 4.2.2) chuỗi 'kiểm tra' được nối hai lần bên trong ứng dụng.

Điều này không xảy ra khi tôi kiểm tra ứng dụng này dưới dạng ứng dụng web di động ngay trong trình duyệt Android.

Nó cũng hoạt động trên Samsung S3 của tôi (Android 4.1.2) bên trong ứng dụng. Không có vấn đề gì về iPhone.

Bất kỳ ai khác đã nhận ra hành vi kỳ lạ này? (Và có lẽ đã có thể sửa chữa nó? ;-))

Answer 1

Sử dụng một giải pháp tạm thời từ scirra.com

last_click_time = new Date().getTime(); 
document.addEventListener('click', function (e) { 
    click_time = e['timeStamp']; 
    if (click_time && (click_time - last_click_time) < 1000) { 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
     return false; 
    } 
    last_click_time = click_time; 
}, true); 

Answer 2

Tôi nghĩ lý do của các nhấp chuột kép/nhiều là gia tốc phần cứng bị hỏng hóc, Tôi đang gặp đồng thời nhấp chuột + tuyên truyền, tuyên truyền dễ dàng ngăn chặn, tuy nhiên vì đối số thứ ba của addEventListener không được tôn trọng trong trường hợp của tôi, tôi không thể ngăn nhấp đúp ngay cả với mã được trả lời trước đây, đây là những gì tôi đã sử dụng

function cw(event) // click wall 
{ try { 
    click_time_cw = (new Date()).getTime(); 
    if (click_time_cw && (click_time_cw - last_click_time_cw) < 350) { 
     event.stopImmediatePropagation(); 
     event.preventDefault(); 
     add_log('prevented misclick [CW] '+(click_time_cw - last_click_time_cw)); 
     return true; 
    } 
    last_click_time_cw = click_time_cw; 
    event.stopImmediatePropagation(); 
    event.stopPropagation(); 
    return false; 
} catch(e){ add_alert(e,"stpr"); } } 

bạn một LSO phải khởi tạo last_click_time_cw = (new Date()) getTime() đâu đó

này là một ví dụ onclick:.

<button class="btn" onclick="if(cw(event)) return true; onclick_logic()">something</button> 

nó có vẻ như rất nhiều công việc và khó chịu sửa chữa/xấu xí, nhưng vấn đề nhấp chuột đã ám ảnh tôi trong nhiều tháng, có vẻ như đây là những gì tôi nên làm từ đầu

Answer 3

Tôi xử lý tình huống tương tự của mình rất gần với giải pháp của Soulwax, tuy nhiên tôi không muốn cản trở các nhấp chuột nhanh người dùng bằng cách theo dõi khoảng thời gian. Thay vào đó, tôi chỉ cần theo dõi loại sự kiện trong đối tượng dữ liệu của liên kết và nếu nó đang cố gắng xử lý một cú nhấp chuột ngay lập tức sau một lần chạm, tôi bỏ qua cuộc gọi đó.

$('.link').on('touchstart click', function(e){ 
    e.preventDefault(); 

    //Prevent against handling a click immediately after touchstart. 
    if(e.type == "click" && $(this).data("lastTouch") == "touchstart"){ 
    e.stopImmediatePropagation(); 
    return false; 
    } 
    $(this).data("lastTouch", e.type); 

    $('.nav-bar').toggleClass('active'); 
}); 

Answer 4

Sửa lỗi của tôi hơi khác một chút. Tôi đã sử dụng touchend thay vì click trình xử lý sự kiện, vì click không kích hoạt mỗi khi cần. Giả sử bạn nhấp vào nút, trình xử lý sự kiện nhấp được kích hoạt, nhưng nếu bạn nhấp lại vào nút đó thì không.

Điều này xảy ra với bất kỳ loại phần tử DOM nào.Môi trường của tôi là:

• jQuery 1.9.1;
• jQM 1.3.2;
• Phonegap 3.5.0-0.21.14.

Đây là mã của tôi:

if (window.cordova) { 
    // hack to avoid double tap 
    var lastTapTime = new Date().getTime(); 
    function tryToAvoidDoubleTap(e){ 
     var tapTime = e["timeStamp"]; 
     if (tapTime && (tapTime - lastTapTime) < 300) { 
      // prevent double tap to happen 
      e.stopImmediatePropagation(); 
      e.preventDefault(); 
      // jQM button handling 
      if ($('.ui-btn').length) 
       $('.ui-btn').removeClass('ui-btn-active'); 
      return false; 
     } 
     lastTapTime = tapTime; 
    } 

    // Wait for PhoneGap to load 
    document.addEventListener("deviceready", onDeviceReady, false); 

    // PhoneGap is ready 
    function onDeviceReady() { 
     document.addEventListener("touchend", tryToAvoidDoubleTap, true); 
    } 
} 

Answer 5

tôi đã phải đối mặt với vấn đề chính xác như nhau, nhưng ứng dụng của tôi/trò chơi cần người dùng để có thể chạm đúp, trên touchstart. Vì vậy, giải pháp scirra được đề cập ở trên không thể sử dụng như là một sự chậm trễ yêu cầu 500 hoặc 1000 ms giết chết doubletap.

Sau khi một số digging tôi nhận thấy một sự khác biệt giữa (người dùng) đầu tiên vòi và (bug) thứ hai vòi:

event.originalEvent.touches 

không có sẵn trong các máy lỗi thứ hai. Vì vậy, tôi đã viết lỗi này helper phát hiện mà giải quyết trường hợp của tôi:

function isDoubleTapBug (e) { 
    // only handle touch events (in case your listener works on mouse events too) 
    if (!'ontouchstart' in document.documentElement)) 
    return false; 
    if (!e.originalEvent.touches) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    return true; // indicate to caller that it's a bug 
    } 
    return false; 
} 

Sau đó, trong người nghe của bạn, làm điều này:

document.addEventListener('touchstart', function (e) { 
    if (isDoubleTapBug(e)) 
    return false; 
    // now do your actual event handling stuff...  
}