Fork me on GitHub

自己踩过的坑

touchstart 和 click 的坑

产生原因:

1
2
3
4
var tap = 'ontouchstart' in window ? 'touchstart' : 'click';
wrap.addEvenListener(tap, function(){
signUp();
});

通过上面代码简单为用户设置事件类型,但我们忽略了‘联想触控笔记本’,由于该笔记本支持‘touchstart’事件,但当用户使用鼠标时却不能触发‘touchstart’事件,造成不能触发对应的事件处理函数。

  1. 有些 PC 设备屏幕为触摸屏,同时支持touchstart和click事件;
  2. 用户触发touchstart事件,默认必然会导致触发click事件,但是触发click事件,不一定会导致touchstart事件被触发;
  3. 此类设备外接鼠标时,通过上面的绑定方式,会绑定touchstart事件,但是鼠标操作只能触发click,导致touchstart不触发;

解决方案

均使用click事件(移动端存在300ms延迟)

通过UA判断设备是否为移动端,再确认事件类型

1
2
3
4
function isMobile() {
return navigator.userAgent.match(/(blackberry|configuration\/cldc|hp |hp-|htc |htc_|htc-|iemobile|kindle|midp|mmp|motorola|mobile|nokia|opera mini|opera |Googlebot-Mobile|YahooSeeker\/M1A1-R2D2|android|iphone|ipod|mobi|palm|palmos|pocket|portalmmm|ppc;|smartphone|sonyericsson|sqh|spv|symbian|treo|up.browser|up.link|vodafone|windows ce|xda |xda_)/i) ? true : false;
}
var tap = isMobile() ? 'touchstart' : 'click';

全部使用click,通过FastClick解决300毫秒的延迟问题

不再绑定的时候进行判断,而是对touchstart 和 click 同时绑定,但是在 touchstart 触发的时候暂停取消后续 click 的响应。

具体实现:

  1. 在touchstart事件响应中调用preventDefault()方法,阻止后续click事件的触发(也会阻止多个事件绑定叠加和多人合作项目,导致以来 click 事件出现bug)
  2. 在touchstart事件中设置一些标记,或者取消click事件的绑定,使得click事件触发时不会触发我们绑定的逻辑,在一段时间(例如300-500ms)后再恢复
  3. 直接对事件处理函数进行节流(throttle),保证在一段时间内(300ms - 500ms),事件处理函数只触发一次

instanceof

object instanceof constructor
instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例。
instanceof 运算符用来测试一个对象的原型链中是否存在一个构造函数的 prototype 属性。

URL 构造函数 和 URLSearchParams 构造函数

URL

URL() 构造函数返回一个新创建的URL对象,表示由参数定义的URL。

实例属性

URL 实例的属性与Location对象的属性基本一致,返回当前 URL 的信息。
URL.href、URL.protocol等

静态方法

URL.createObjectURL()
URL.createObjectURL方法用来为上传/下载的文件、流媒体文件生成一个 URL 字符串。这个字符串代表了File对象或Blob对象的 URL。
URL.revokeObjectURL()
URL.revokeObjectURL方法用来释放URL.createObjectURL方法生成的 URL 实例。它的参数就是URL.createObjectURL方法返回的 URL 字符串。

URLSearchParams

URLSearchParams对象是浏览器的原生对象,用来构造、解析和处理 URL 的查询字符串(即 URL 问号后面的部分)。

方法

URLSearchParams.append()
插入一个指定的键/值对作为新的搜索参数。
URLSearchParams.delete()
从搜索参数列表里删除指定的搜索参数及其对应的值。
URLSearchParams.entries()
返回一个iterator可以遍历所有键/值对的对象。
URLSearchParams.get()
获取指定搜索参数的第一个值。
URLSearchParams.getAll()
获取指定搜索参数的所有值,返回是一个数组。
URLSearchParams
URL 对象,URLSearchParams 对象

-------------本文结束感谢您的阅读,如果本文对你有帮助就记得给个star-------------
Donate comment here