我正在使用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>
正在使用的库:
点击(或点击)我的Nexus 4(Android 4.2.2)上的链接后,应用程序内的字符串'test'会被追加两次。
当我直接在Android浏览器中将其作为移动网络应用程序进行测试时,这不会发生。
它也适用于我的应用程序内的三星S3(Android 4.1.2)。 iPhone也没问题。
其他人都认识到这种奇怪的行为? (也许能够解决它?;-))
答案 0 :(得分:15)
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元素。我的环境是:
这是我的代码:
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...
}