javascript - 触摸端处理程序触发两次

标签 javascript mobile-safari touch-event

在 iOS 上的一个网络应用程序上,我有一堆按钮只响应 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>

有人可以帮忙吗?

谢谢!

最佳答案

我认为在触摸结束时触发的视觉整页警报会干扰触摸事件周期。屈服于 DOM 后尝试调用警报。例如。

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

关于javascript - 触摸端处理程序触发两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7492070/

相关文章:

android - Selenium 可以测试移动 web 应用程序吗?

android - 释放按钮时,为什么工作线程会陷入循环?

Android OnTouchEvent 触发 3 次

Javascript函数和数组问题

objective-c - 从MobileSafari安装.deb

javascript - 如何从函数返回值到主线程?

ios - 我如何了解 UIApplication 是否要在 Safari 应用程序中打开链接?

javascript - 带笔的 Chrome canvas touchstart 无法正常工作

javascript - 在 jquery 文件中调用 javascript 函数

javascript - 无法使用 jquery 获取内联变换比例