{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我欲成王，谁敢阻挡 的问题《touchend handler fires twice》','https://www.manongdao.com/q-1366211.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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!
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.