touchend處理程序觸發兩次

在iOS上的webapp上，我有一堆只響應touchend的按鈕（作爲移動Safari中的點擊延遲的快捷方式）。當我在處理程序中粘貼警報時，即使他們有自己的處理程序，隨後輕擊頁面上任何其他按鈕也會觸發該原始處理程序。下面是說明問題的一些示例代碼：touchend處理程序觸發兩次

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> 

<script type="text/javascript"> 

function clickAlert(evt) { 
    alert('btn clicked'); 
} 

function clickData(evt) { 
    var div; 

    div = document.getElementById('data'); 
    div.innerHTML += 'btn2 click: ' + (new Date().getTime()) + '<br/>'; 
} 

function loadHandler() { 
    var btn; 

    btn = document.getElementById('btn-click-alert'); 
    btn.addEventListener('touchend', clickAlert, false); 
    btn = document.getElementById('btn-noclick'); 
    btn.addEventListener('touchend', clickData, false); 
} 

window.addEventListener('load', loadHandler, false); 
</script> 

</head> 
<body> 

<button id="btn-click-alert">Click to alert</button> 
<button id="btn-noclick">No alert here</button> 
<div id="data"> </div> 
</body> 
</html>

有人可以幫忙嗎？

謝謝！

來源

2011-09-20 sunil

我相信在觸摸端觸發的視覺整頁警報會干擾觸摸事件的循環。嘗試在產生DOM後調用警報。例如。

setTimeout(function() { 
    alert('btn clicked'); 
}, 0);

來源

2012-03-20 06:24:36

幹得好。有用。 –

很好的答案謝謝。你可以進一步深入瞭解爲什麼這會起作用嗎？舉例來說，你解決了這個問題下面的條件，但我不知道如何..'如果（拖）{ \t \t的setTimeout（函數（）{ \t \t \t拖動= FALSE; \t \t}，0） \t \t返回; \t} ' – Squirrl

touchend處理程序觸發兩次

回答

相關問題