react中click事件的优化

本文深入探讨了FastClick插件的工作原理,重点分析了其如何通过判断滑动与点击时间间隔来提升移动端点击响应速度,取消实际绑定的click事件,以及兼容多种事件如focus和textarea的处理方式。

今天做react优化的时候,想到了click的延迟事件;

引入了react-fastclick模块;

 

想要探究一下fastclick插件背后原理,由于react-fastclick中的事件都是合成事件,可能会稍微复杂一些,所以在网上找了一个原生js可用的的fastclick.js模块。

 

插件的注释写得真的太友好了,几乎可以无障碍阅读,比jquery简单。

大概思路就是,先判断它是不是一个滑动(如果是一个滑动,就好比你滑动页面,不小心经过了该div,是不会触发的。)以及点击从开始到结束时间间隔是否>100ms,(这个应该是一个约定俗成的东西),判断结束之后就dispatch一个事件

 

接着,取消实际绑定的click事件,(我觉得是这个插件里面我觉得最精妙的部分)

```

            // Prevent any user-added listeners declared on FastClick element from being fired.

            if (event.stopImmediatePropagation) {

                event.stopImmediatePropagation();

            } else {

 

                // Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)

                event.propagationStopped = true;

            }

 

            // Cancel the event

            event.stopPropagation();

            event.preventDefault();

```

除了这些还判断是否是focus事件,textaera事件等等,

还有兼容性到了iso4...

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值