mrdulin / blog

Personal Blog - 博客 | 编程技术,软件,生活

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

移动触屏设备触摸事件触发两次的问题

mrdulin opened this issue · comments

问题:使用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