touchend处理程序触发两次

编程入门 行业动态 更新时间:2024-10-15 20:24:01
本文介绍了touchend处理程序触发两次的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

在iOS上的webapp上,我有一堆按钮只响应touchend(作为移动游戏中点击延迟的快捷方式)。当我在处理程序中粘贴警报时,即使他们有自己的处理程序,随后点击页面上任何其他按钮也会触发此原始处理程序。以下是一些说明问题的示例代码:

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>

有人可以帮忙吗?

谢谢!

推荐答案

我认为触摸端触发的可视整页警报会干扰触摸事件周期。屈服于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.

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

更多推荐

touchend处理程序触发两次

本文发布于:2023-11-27 13:04:33,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1638193.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:两次   程序   touchend

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!