react中click事件的优化

今天做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...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值