移动端click延时的尝试移动端click延时的尝试

据说移动端click有个延时300ms响应的机制，目的是为了区分单击、双击。如果300ms内再次点击，则判定为双击，移动端的双击用于缩放页面；否则为单击，执行click的事件处理函数。
取消click延时响应的两种做法：

设置视口标签，禁用缩放页面功能，浏览器也会相应取消对双击的响应。
利用touch系列事件包装一组监听器，只有touch持续时间小于某个值才归为点击（大于就是长按或者拖拽了），进而执行事件处理函数。

【移动端click延时的尝试】按理说，现在移动端都会设置viewport：

所以，第2种做法有点脱裤子放屁的感觉？
好奇究竟延迟多久，真的300ms？于是写了第2种做法的监听函数setFastClick，并检测了实际延时，代码如下：

Document - 锐客网* { margin: 0; padding: 0; }div { width: 200px; height: 200px; background-color: pink; }p { width: 200px; height: 200px; background-color: green; } click me and console.log('fast click')click me and console.log('normal, slow and delay click')

设置视口标签禁用缩放后，浏览器就直接取消click延时机制了。所以，这里要把viewport注释掉。
然而，一开始我以为删掉initial-scale=1.0就行了，结果愣是没出现延时，响应时间都是几十毫秒。后来一狠心把viewport整行去掉，才发现了确实延时了300ms。
想想也是，width=device-width意思就是页面宽度等于设备宽度，就是告诉浏览器不必缩放了，浏览器也就取消click延时了。