fastclick,tap之类的类库还有使用的必要吗?

Question

这些类库是为了解决300毫秒延迟以及点透bug出现的.

刚转移动开发的时候没想太多,找了几篇文章都提到这些问题.提出的方案一般都是推荐使用这类插件.因此也就无脑采纳了.

现在回过头来发现这些类库本身也是有很多缺陷的.多次派发,input失效,点击失灵等等,不一而足.一些库的用法更是非常别扭,比如vue-tap,使用指令的方式--v-tap="{methods:handler}";

模仿zepto的tap尝试自己实现过一个类似的库.测试不到位,自己也觉得问题估计不少.觉得实际上走上了死胡同.

刚学编程的时候,非常喜欢造轮子.喜欢各种奇技淫巧.但渐渐的,发现其实标准才是解决问题的正经道路.

300毫秒是移动开发方兴未艾的时候的设计缺陷.实际上相关的标准早就修复了这个问题.方式如下

1.viewport

<meta name="viewport" content="width=device-width">

浏览器检测到这个标签,会认为这是一个已经对移动端做了良好适配的页面,会禁用双击缩放.也就不存在点击延迟问题.

2.touch-action

html {
  touch-action: manipulation;
}

这个属性用于指定元素对touch事件的响应方式.
详见MDN
兼容性不错

至于点透,这个问题其实只要知道了原因,很好解决.

<!-- box定位在链接上方 -->
<div class="box" ontouchend="this.style.display='none'">
</div>
<a href="http://www.baidu.com">百度一下,你就知道</a>

上面的代码会导致点击box隐藏时跳转.
解决方式非常简单

<div class="box" ontouchend="setTimeout(()=>{this.style.display='none'})">
</div>

把隐藏操作放在异步回调里,保证这个操作在元素派发click之后执行就完全可以避免点透.
实际上这种会导致点透的场景在页面中并不常见.为了解决这种问题引入一些问题多多的第三方类库实在是因噎废食.

当然,这只是个人看法.我正是因为并不能确定是否还有没有考虑到地方,加的群少,也没地方问,因此来此收集下大家的看法,希望各位不啬赐教.多谢各位.

Answer 1

我同意你的看法