带有Android 4.2的Phonegap 2.4.0 - 奇怪的双击行为

时间:2013-02-20 14:56:02

标签: android cordova onclick double-click

我正在使用phonegap 2.4.0来创建Android和iOS应用程序。

现在我认识到链接中的onclick事件在Android应用程序中使用Android 4.2.2在Nexus 4设备上被触发两次,就像双击一样(虽然我只点击了一次!)。

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

正在使用的库:

  • jquery 1.9.1
  • jquery mobile 1.3.0(rc)
  • jquery ui 1.10.0
  • jquery touch punch 0.2.2
  • phonegap 2.4.0

点击(或点击)我的Nexus 4(Android 4.2.2)上的链接后,应用程序内的字符串'test'会被追加两次。

当我直接在Android浏览器中将其作为移动网络应用程序进行测试时,这不会发生。

它也适用于我的应用程序内的三星S3(Android 4.1.2)。 iPhone也没问题。

其他人都认识到这种奇怪的行为? (也许能够解决它?;-))

5 个答案:

答案 0 :(得分:15)

使用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);

答案 1 :(得分:2)

我与Soulwax的解决方案非常接近地处理了我的类似情况,但是我不希望通过跟踪时间间隔来阻止用户的快速点击。相反,我只是跟踪链接数据对象中的事件类型,如果它在触摸开始后立即尝试处理点击,则忽略该调用。

$('.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');
});

答案 2 :(得分:0)

我认为这些双击/多次点击的原因是硬件加速出现故障,我遇到同时点击+传播,传播很容易防止,但是由于addEventListener的第三个参数在我的情况下不受尊重,我可以'即使使用之前回答的代码,也要防止双击,这是我最终使用

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

你还需要初始化last_click_time_cw =(new Date())。getTime()某处

这是一个例子onclick:

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

它可能看起来像很多工作和一个令人不快/丑陋的修复,但点击问题一直困扰着我好几个月,似乎这是我应该从开始做的

答案 3 :(得分:0)

我的修复有点不同。我使用touchend代替click事件监听器,因为click每次都不需要触发。假设您单击一个按钮,则会触发单击事件侦听器,但如果再次单击该按钮则不会。

它适用于任何类型的DOM元素。我的环境是:

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

这是我的代码:

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

答案 4 :(得分:0)

我遇到了完全相同的问题,但我的应用/游戏需要用户才能在touchstart上双击。所以上面提到的scirra解决方案不可用,因为500或1000毫秒的所需延迟会导致双击。

经过一番挖掘后,我注意到第一个(用户)点击和第二个(bug)点击之间存在差异:

event.originalEvent.touches 

在第二个错误点击中无法使用。 所以我写了这个错误检测帮助器来解决我的问题:

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

然后在你的听众中,这样做:

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