阅读数:

react项目中点击事件延迟

0

说明

在react web项目中,我们经常会遇到点击事件,比如一个链接或者一个按钮,
为了兼容性,我们常常只写一个click函数,这样pc和mobile都能处罚,当然你可以写touch
事件,那得区别对待了,mobile:touch ;pc:click ,成本有点高还麻烦,今天带来在项目中的实践;
原因是这样的,我们有个类似tab的多选功能,点击后更改样式,但是在实际操作中,手机点击后样式改变
的有点肉,后边断定是触屏 click 300ms的延迟导致的。

实现

由于我们用的是react+redux+router+webpack+nodejs框架,熟悉的童鞋都知道,
这是个单页应用,就一个html模版,一般情况下我们是不容许改模版的也就是说,不建议在里面直接引用js。
后来苦苦寻找找到了node版的插件react-fastclick,部署很简单

1
npm insall react-fastclick --save

usage

1
2
3
componentWillMount() {
initReactFastclick();
}

这样我们就很easy的消除了触屏的300ms延迟,而dom你还是简单写click就好,最终pc和mobile 点击效果
达到一致,触屏点击不在有肉肉的感觉


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^