// timer为全局变量 getClickEmail1(_type) { clearTimeout(this.timer); if (_type == 1) { if (event.detail == 2) return; this.timer = setTimeout(function() { console.log("单击"); }, 300); } else { console.log("双击"); } }
html如下:
<span @click="getClickEmail1(1)" @dblclick="getClickEmail1(2)" >点我</span>
单击:用户单击触发 getClickEmail1(1) 函数,清除定时器这个先不管,if里的意思是如果在同样的地方执行同种方法两次,也就是双击的意思,退出这个函数,单击不会触发if。下来给定时器赋值,300ms后执行输出单击的这句话,如果单击的话就不会在300ms里触发其他事件,所以单击解释完毕。
双击:用户双击触发两次click和一次dbclick。第一次先执行aa函数,因为这是第一次所以不会return,300ms之间还没有等单击这两个字输出便再次触发了aa函数,次数记为两次,return出去,之后触发bb函数,输出双击两个字。