{"action":"opened","issue":{"url":"https://api.github.com/repos/willshawzq/blog/issues/12","repository_url":"https://api.github.com/repos/willshawzq/blog","labels_url":"https://api.github.com/repos/willshawzq/blog/issues/12/labels{/name}","comments_url":"https://api.github.com/repos/willshawzq/blog/issues/12/comments","events_url":"https://api.github.com/repos/willshawzq/blog/issues/12/events","html_url":"https://github.com/willshawzq/blog/issues/12","id":144607213,"number":12,"title":"响应双击事件时，规避单击事件","user":{"login":"willshawzq","id":7007063,"avatar_url":"https://avatars.githubusercontent.com/u/7007063?v=3","gravatar_id":"","url":"https://api.github.com/users/willshawzq","html_url":"https://github.com/willshawzq","followers_url":"https://api.github.com/users/willshawzq/followers","following_url":"https://api.github.com/users/willshawzq/following{/other_user}","gists_url":"https://api.github.com/users/willshawzq/gists{/gist_id}","starred_url":"https://api.github.com/users/willshawzq/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/willshawzq/subscriptions","organizations_url":"https://api.github.com/users/willshawzq/orgs","repos_url":"https://api.github.com/users/willshawzq/repos","events_url":"https://api.github.com/users/willshawzq/events{/privacy}","received_events_url":"https://api.github.com/users/willshawzq/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-03-30T14:18:34Z","updated_at":"2016-03-30T14:18:34Z","closed_at":null,"body":"### 问题 ###\r\n在项目开发时，遇到同时绑定单击和双击事件的情况。当发起双击操作时，会事先响应两次单击事件。那单击事件中绑定的方法将执行两次，这是我们所不想看到的。\r\n\r\n测试代码：\r\n\r\n\t......\r\n    handleClick(ev) {\r\n      console.log('click');\r\n    },\r\n    handleDoubleClick(ev) {\r\n      console.log('double click');\r\n    },\r\n\t......\r\n\r\n测试结果：\r\n\r\n![](http://i.imgur.com/HtWi6UI.png)\r\n\r\n![](http://i.imgur.com/QfhvGwh.png)\r\n\r\n从上面两次结果可以看出，普通双击事件会先响应两次单击事件；如果连续快速的点击的话，并不会触发双击事件，而是不断的触发单击事件，在正常情况下，我们也不应该响应快速的连续点击。\r\n\r\n### 处理方法 ###\r\n这种情况要如何处理呢？\r\n\r\n处理起来和移动端`tap`事件的实现方式类似，将单击事件推迟`300ms`执行。\r\n\r\n测试代码：\r\n\r\n    ......\r\n\thandleClick(ev) {\r\n      clearTimeout(this.timer);\r\n      this.timer = setTimeout(() => {\r\n        console.log('click');\r\n      }, 300);\r\n    },\r\n    handleDoubleClick(ev) {\r\n      clearTimeout(this.timer);\r\n      console.log('double click');\r\n    },\r\n\t......\r\n\r\n上面代码思路为：当触发点击事件时，先清理前面的定时器，重新定义一个定时器，如果浏览器响应了双击事件，则将新定义的定时器清除，执行双击事件；如果连续点击，则会先响应双击事件，然后再响应最后一个单击事件。"}}