touchend 处理程序触发两次
在 iOS 上的 web 应用程序上，我有一堆仅响应 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>
有人可以帮忙吗？
谢谢！
On a webapp on iOS, I have a bunch of buttons that respond only to touchend (as a shortcut to the click delay in mobile safari). When I stick an alert in the handler, then a subsequent tap of any other button on the page fires this original handler even though they have their own handlers. Here's some sample code that illustrates the problem:
<!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>
Can someone help?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我相信触摸端触发的视觉全页警报会干扰触摸事件周期。尝试在屈服于 DOM 后调用警报。例如。
I believe the visual, full-page alert being triggered on touch end is interfering with the touch event cycle. Try to call the alert after yielding to the DOM. eg.