移动端开发touch和click的区别
1、click事件主要存在300毫秒的延迟，且不会存在穿透事件
300ms的由来：
这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。
这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。
双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面，在欣喜的时候往往不会care这个300ms的延时问题，可是如今touch端界面如雨后春笋，用户对体验的要求也更高，这300ms带来的卡顿慢慢变得让人难以接受。
使用<meta name="viewport" content="width=device-width,init-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 可以禁止默认的双击缩放，去掉300msyan'chi
2、touch事件 分为touchStart touchMove touchEnd 三个阶段，事件顺序：touchStart->touchEnd->click。touch事件不存在延迟，但是可能会存在穿透事件（原因：加入有两个元素A和B，B在A之上，当我们用touch事件中的回调函数让B元素隐藏，随后A元素触发了click事件。这是因为click事件有300ms的延迟，300ms之后，B元素隐藏了，浏览器触发了click事件，B元素隐藏了，该事件被派发到A 元素之上。），通过e.preventDefault()来阻止
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！