移动触屏设备触摸事件触发两次的问题
mrdulin opened this issue · comments
official_dulin commented
问题:使用react-tap-event-plugin
,使用onTouchTap
事件,会“触发两次”,俗称“ghost click”。
现象:
一、单页应用路由跳转时,如果在触摸事件触发的屏幕区域,A页面和B页面都有可以与用户交互的元素,比如页面A和页面B都有返回按钮,且在相同位置,点击A页面的返回->B页面,由于ghost click,会再次触发B页面返回按钮的事件,页面会再次返回B页面的上一级页面;
二、页面A有一个按钮(监听onTouchTap事件),页面B是可以跳转的列表(监听onClick事件),点击A页面的按钮,跳转到B页面,由于ghost click,会触发B页面和A页面按钮相同位置列表项的点击事件,跳转到该列表项详情页。
原因:
在移动端,onTouchTap
事件会先触发原生的touchstart
和touchend
事件,300ms后,触发原生click
事件。待更新...
解决方案:
待更新
参考链接:
zilverline/react-tap-event-plugin#77
https://github.com/zilverline/react-tap-event-plugin#ignoring-ghost-clicks