11

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

现在我认识到链接中的 onclick 事件在 Nexus 4 设备上使用 Android 4.2.2 的 Android 应用程序内触发了两次，就像双击一样（尽管我只点击了一次！）。

<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 触摸打孔 0.2.2
  • phonegap 2.4.0

在我单击（或点击）我的 Nexus 4（Android 4.2.2）上的链接后，字符串“test”会在应用程序内附加两次。

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

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

其他人认识到这种奇怪的行为吗？（也许能够修复它？;-)）

4

5 回答 5

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);
于 2013-02-27T08:13:04.217 回答
2

我与 Soulwax 的解决方案非常接近地处理了类似的情况，但是我不想通过跟踪时间间隔来阻碍用户的快速点击。相反，我只是在链接的数据对象中跟踪事件类型，如果它试图在 touchstart 之后立即处理点击，我会忽略该调用。

$('.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');
});
于 2014-06-19T21:50:12.813 回答
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);
    }
}
于 2014-09-22T19:55:07.907 回答
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>

看起来工作量很大，而且修复起来很不愉快/丑陋，但点击问题已经困扰我好几个月了，这似乎是我从一开始就应该做的事情

于 2013-06-16T16:13:10.690 回答
0

我面临着完全相同的问题，但我的应用程序/游戏需要用户能够在 touchstart 上双击。因此，上面提到的 scirra 解决方案无法使用，因为所需的 500 或 1000 毫秒延迟会杀死双击。

经过一番挖掘，我注意到第一个（用户）点击和第二个（错误）点击之间的区别：

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...      
}
于 2014-11-10T14:53:01.347 回答