{"action":"opened","issue":{"url":"https://api.github.com/repos/Vicky-fan/F2E-onTheWay/issues/1","repository_url":"https://api.github.com/repos/Vicky-fan/F2E-onTheWay","labels_url":"https://api.github.com/repos/Vicky-fan/F2E-onTheWay/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/Vicky-fan/F2E-onTheWay/issues/1/comments","events_url":"https://api.github.com/repos/Vicky-fan/F2E-onTheWay/issues/1/events","html_url":"https://github.com/Vicky-fan/F2E-onTheWay/issues/1","id":135677381,"number":1,"title":"点击","user":{"login":"Vicky-fan","id":5628537,"avatar_url":"https://avatars.githubusercontent.com/u/5628537?v=3","gravatar_id":"","url":"https://api.github.com/users/Vicky-fan","html_url":"https://github.com/Vicky-fan","followers_url":"https://api.github.com/users/Vicky-fan/followers","following_url":"https://api.github.com/users/Vicky-fan/following{/other_user}","gists_url":"https://api.github.com/users/Vicky-fan/gists{/gist_id}","starred_url":"https://api.github.com/users/Vicky-fan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Vicky-fan/subscriptions","organizations_url":"https://api.github.com/users/Vicky-fan/orgs","repos_url":"https://api.github.com/users/Vicky-fan/repos","events_url":"https://api.github.com/users/Vicky-fan/events{/privacy}","received_events_url":"https://api.github.com/users/Vicky-fan/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-02-23T09:07:06Z","updated_at":"2016-02-23T09:07:06Z","closed_at":null,"body":"## 1.点击\r\n### 1.1 300ms的延迟？\r\n当我们打开没有对移动端分辨率做兼容的PC网页，它开始是缩小来让我们看到整个页面的宽度。我们需要双击放大来查看页面内容。\r\n双击——性能杀手，因为我们每点一次都要判断这是双击还是单击，浏览器设置了300ms的延迟，300ms内点击一次就是单击，点了两次就是双击。\r\n\r\n一次触碰的工作方式：\r\n1.touchstart\r\n2.touchend\r\n3.wait 300ms in case of another tap\r\n4.click\r\n\r\n#### 解决方法：\r\n##### 一些基于 JavaScript 的解决方案\r\n**1. zepto：用tap事件代替click**\r\ntap: 用touchstart, touchmove, touchend模拟，满足基本条件：\r\n* 从触摸到离开时间间隔短（>0, <.25s）\r\n* 手指移动的距离短(<30s)\r\n\r\nps:提升用户体验：加上点击态\r\n* 使用伪类:active(缺点：滚动时候也会出发样式)\r\n* 使用js模拟点击态\r\n\r\n```javascript\r\n$el.on('tap', function(e){\r\n\tvar $target = $(e.target);\r\n    $target.addClass('active');\r\n    \r\n    setTimeout(function() {\r\n    \t$target.reomveClass('active');\r\n    }, 150);\r\n})\r\n```\r\n**2. FastClick**\r\n专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick在检测到touched事件的时候，会通过DOM自定义事件立即触发一个模拟的click事件，并把浏览器在300ms后真正的click事件阻止掉。\r\n```javascript\r\nwindow.addEventListener( \"load\", function() {\r\n    FastClick.attach( document.body );\r\n}, false );\r\n```\r\n当 FastClick 检测到当前页面使用了基于 `<meta>` 标签或者 `touch-action` 属性的解决方案时，会静默退出。\r\n\r\n\r\n##### 浏览器开发商提供的解决方案\r\n**1. 禁用缩放 **\r\n`user-scalable=no`\r\n缺点：完全禁用缩放，即你想要放大一张图片或者一段字体较小的文本，却发现无法完成操作。\r\n\r\n**2. `width=device-width` **\r\n在 Chrome 32 这一版中，他们将[在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放](https://codereview.chromium.org/18850005/)\r\n它只是去除了双击缩放，但用户仍可以使用双指缩放\r\n这一优化目前仅被 Chrome 32 及以上所支持\r\n\r\n**2. IE指针事件 **\r\n`touch-action`:新 CSS 属性,是否触摸操作会触发用户代理的默认行为，将其置为 none 即可移除目标元素的 300 毫秒延迟\r\n在 IE10 和 IE11 上移除了所有链接和按钮元素的点击延迟。\r\n```css\r\na[href], button {\r\n    -ms-touch-action: none; /* IE10 */\r\n    touch-action: none;     /* IE11 */\r\n}\r\n```\r\n在 `<body>` 元素上设置 `touch-action: none`，这就彻底禁用了双击缩放 (注：这也同时禁用了双指缩放)\r\n\r\n>JavaScript 的方案很好地解决了延迟问题，但毕竟只是临时的措施\r\n>浏览器本身所提供的方案,更属长久之计\r\n\r\n\r\n### 1.2 zepto的tap点透\r\n![tap](https://cloud.githubusercontent.com/assets/5628537/13246581/91a9dd94-da4f-11e5-95ce-7b4b8553b158.gif)\r\n\r\n##### 问题：\r\n* 如果绑定tap方法的dom元素在tap方法触发后会隐藏、css3 transfer移走、requestAnimationFrame移走等，而“隐藏、移走”后，它底下同一位置正好有一个dom元素绑定了click的事件、或者有浏览器认为可以被点击有交互反应的dom元素（举例：如input type=text被点击有交互反应是获得焦点并弹起虚拟键盘），则会出现“点透”现象。\r\n* a标签超链接,自带默认行为（如href）,绑定tap事件处理业务后，无法直接取消默认行为。\r\n\r\n##### 解决方法：\r\n1.  FastClick \r\n2.  将tap事件改为touchend\r\n\r\nhttp://blog.youyo.name/archives/zepto-tap-click-through-research.html\r\n"}}