Javascript touchend处理程序触发两次_Javascript_Mobile Safari_Touch Event

Javascript touchend处理程序触发两次

javascript

Javascript touchend处理程序触发两次,javascript,mobile-safari,touch-event,Javascript,Mobile Safari,Touch Event,在iOS上的一个webapp上，我有一堆只对touchend做出响应的按钮（作为移动safari中点击延迟的快捷方式）。当我在处理程序中粘贴警报时，随后点击页面上的任何其他按钮都会触发此原始处理程序，即使它们有自己的处理程序。下面是一些示例代码，说明了问题： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width; initial-scale=1.0;

在iOS上的一个webapp上，我有一堆只对touchend做出响应的按钮（作为移动safari中点击延迟的快捷方式）。当我在处理程序中粘贴警报时，随后点击页面上的任何其他按钮都会触发此原始处理程序，即使它们有自己的处理程序。下面是一些示例代码，说明了问题：

<!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>


功能clickAlert（evt）{
警报（“btn已点击”）；
}
功能点击数据（evt）{
var-div；
div=document.getElementById（'data'）；
div.innerHTML++=“btn2点击：”+（新日期（）.getTime（））+”
；
}
函数loadHandler（）{
var-btn；
btn=document.getElementById（'btn-click-alert'）；
btn.addEventListener（'touchend'，clickAlert，false）；
btn=document.getElementById（'btn-noclick'）；
btn.addEventListener（'touchend'，clickData，false）；
}
addEventListener（'load'，loadHandler，false）；
单击以发出警报
这里没有警报

有人能帮忙吗

谢谢

我认为触控端触发的可视整页警报干扰了触控事件循环。在屈服于DOM后尝试调用警报。例如

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

很好的回答，谢谢。你能不能再深入一点，解释一下为什么会这样？例如，您修复了以下条件，但我不知道如何<代码>如果（拖动）{setTimeout（function（）{drawing=false；}，0）返回；}