中国领先的IT技术网站
51CTO旗下网站
关于移动web开发过程中的”点透“问题
A是遮罩层，B是正常的DOM，C是B上的某个元素，这里是链接。场景是点击A的时候A消失，结果点到了C，页面发生了跳转，这显然不是咱想要的~
作者：彼岸花在开来源：博客园| 09:55
先说说故事发生的场景，举个栗子如下图：
A是遮罩层，B是正常的DOM，C是B上的某个元素，这里是链接。场景是点击A的时候A消失，结果点到了C，页面发生了跳转，这显然不是咱想要的~
下面我们来监测点击事件：
var&div1&=&document.getElementById(&div1&);&var&div2&=&document.getElementById('div2');&var&con&=&document.getElementById('console');&function&handle(e){&&&&&var&tar&=&e.target,&eve&=&e.&&&&var&ele&=&document.createElement(&p&);&&&&ele.innerHTML&=&&target:&+&tar.id&+&&&event:&&+&eve&;&&&&con.appendChild(ele);&&&&if(tar.id&===&&div1&){&&&&&&&&&div1.style.display&=&&none&;&&&&}&}&div1.addEventListener(&touchend&,handle);&div1.addEventListener(&touchstart&,handle);&
只要你不点击C处，一切都很平静，貌似没有问题，事件顺序是这样的：
target:div1&event:touchstart&target:div2&event:touchend&
但是如果你在C处点击A，你会发现页面跳转了，为了更清楚的看到这个过程，我们为B绑定click事件，即如果B触发了click事件，那么说明，在A上的点击最终点到了B上。在上面javascript清单上添加一行代码如下：
div2.addEventListener('click',handle);&
点击B区域，可以看到页面下方的log记录控制台内出现如下内容：
target:div1&event:touchstarttarget:div1&event:touchendtarget:div2&event:click&
可见，在div1的事件触发完毕后，div2也就是B区域神奇的捕获到了click事件，而事实上我们只点击了div1。这就是&点透&了，隔山打牛！
点透现象出现的场景：
刚才举例说明了什么是点透，其实点透的出现场景可以总结如下：
A/B两个层上下z轴重叠。
上层的A点击后消失或移开。（这一点很重要）
B元素本身有默认click事件（如a标签） 或 B绑定了click事件。
在以上情况下，点击A/B重叠的部分，就会出现点透的现象。
为什么会出现&点透&现象
在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟，具体touchstart与click的区别如下：
touchstart：在这个DOM（或冒泡到这个DOM）上手指触摸开始即能立即触发
click：在这个DOM（或冒泡到这个DOM）上手指触摸开始，且手指未曾在屏幕上移动（某些&a
href=&http://www.it165.net/edu/ewl/& target=&_blank&
class=&keylink&&浏览器&/a&允许移动一个非常小的位移值），且在这个在这个dom上手指离开屏幕，且触摸和离开屏 幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发
也就是说，事件的触发时间按由早到晚排列为：touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的，这个时间大概在300ms左右。
由于我们在touchstart阶段就已经隐藏了罩层A，当click被触发时候，能够被点击的元素则是其下的B元素，由于B绑定了click事件（或者B本身默认存在click事件），所以B的click事件被触发，产生了点透的情况。
对于B元素本身没有默认click事件的情况（无a标签等），应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件。
对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件，从而阻止click事件的产生。即应在上例的handle函数中添加代码如下：
e.preventDefault();
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
热点头条热点头条热点
24H热文一周话题本月最赞
讲师：108828人学习过
讲师：266574人学习过
讲师：81797人学习过
精选博文论坛热帖下载排行
《系统分析师考试辅导（2007版）》内容涵盖了最新的系统分析师考试大纲信息系统综合知识的所有知识点，分析了近3年信息系统分析与设计案例...
订阅51CTO邮刊在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
在移动设备上按下手指单击，按先后顺序，依次会发生touchstart-&-touchmove（如果有的话）&touchend-&mousedown-&mousemove（如果有的话）-&mouseup-&click-&dblckick（如果有的话，IOS上不支持dblclick事件，Android支持dblclick事件）。
在2007年苹果发布的首款iphone时，其IOS系统的safari，为了将PC端页面在手机显示时避免文字太小，就使用了双击缩放。在屏幕上快速连续单击两次，safari的浏览器会将网页放大或者缩小。而所谓click的“300mm”延时就出在这里，当用户按下一个手指单击时，safari会捕获这个click事件，但是并不会立马响应其处理函数，因为浏览器还不确定用户按了这次是不是还要接着按下一次来个双击缩放页面。如果是一个a超链接，单击这个超链接，单击了之后会在300毫秒之后才跳转，300毫秒之内又单击了就认定是个双击缩放页面，而不会跳转。
现在的IOS和Android的浏览器，还是存在这个特性，手指单击之后，最先触发touchstart，差不多300毫秒后click事件才发生。要解决这个延时的问题很简单，并不需要借助zepto还是其他的库。这个关键就在于，必需禁止移动浏览器自带的双击缩放功能，只要禁止之后，这个click延时就不存在。
给文档加这个头禁止页面缩放。对于IOS的safari必需要width=device-width属性，否则IOS中click就会延时。Android中，user-scalable=no和width=device-width两个中有一个就可以取消click延时，为了兼容性两个都写上。
通过&meta&标签取消了click 300毫秒延时之后，当按下手指，最先触发touchstart，然后再触发click时，最短可以只有10毫秒，只要松手指松的足够快，click就会足够的块的响应，松的慢就响应的慢。只有当手指最终松开时click事件才会发生，但IOS和Android对click的这个处理还是有较大差异，在Android上手指按下去一直不放，差多过了八百毫秒之后，手指再放开后click就不会发生了。IOS上手指一直按住，按多长时间后再放开，click事件还会发生。
这就存在一种不确定性，如果用click关闭一个遮罩层，手指松的早就关的早，松的迟遮罩就关的迟，在IOS一直按住按了10秒再松开，click还被触发让遮罩关闭了，能够按10秒基本都是要长按，都不是单击了。
对于要实现tap这个事件，就需要两个核心，第一个是规定一个时间，比如150毫秒之内松开手指就触发tap事件，松慢了tap就不会触发而认为这是要长按，第二点是tap必需在click事件的后面执行，如果tap在click前面执行就会产生“点透”的问题。
如果不设置&meta&标签放任浏览器的click延时，也可以解决单击延时。所有诸如zepto.touch.js这类库，自定义tap事件，它本质上就是没有使用click了，不管click延时不延时，它就是在使用touched来单击，把用户定义的单击操作放到了touchend中进行，不管有没有meta，touched不会有延时。
早期版本的zepto的tap就是如此处理的，tap自定义事件在touchend中触发，解决单击延时的问题。zeopto解决了延时，但是又由于touched会在click之前触发，这就又存在“点透”的问题。最新的1.2版zepto.touch.js试图去解决tap点透的问题，于是在touchend中加了一个setTimeout(callback,0)的异步事件。
但是它不见得好用，第一个问题是，如果没有设置meta禁止页面缩放让click保持在300毫秒后触发，那么设置不设置这个setTimeout()异步没有区别，touchend触发时候，用户定义的tap事件也就触发了，300毫秒后click又接着触发，还是会产生点透。zepto的tap的这个前提，就要求你必需设置meta让click尽快触发，但是即便设置了meta，zepto.touch.js还是有个bug会导致点透。在它的源码中，就像上面那样，给setTimeout()设置了0的延时，0延时的异步在PC上没有问题，在手机上就有问题，tap会有时会在click前面执行有时又会在click后面执行导致有时会点透。
tap可以借助touched解决单击延时，但是本质上没有办法解决点透，除非浏览器允许取消后面要跟随触发的click。要解决点透，只能设置&meta&让click尽快响应，然后再利用setTimout(callback,30)的异步回调让用户自定义tap在click触发之后再执行，这样才可以真正避免点透。
同时touched也是在手指最终松开时才触发，这会同样就会产生不确定性，因此也需要一个时间限制，超过了这个时间tap就不再触发。zepto.touch.js做了这个处理，但好像是疏忽写错了导致这个时间判断有问题。
“点透”的问题主要存在于一个元素覆盖在另外一个元素上面时，最常见的就是遮罩层。给上面的遮罩层绑定touchstart之类的事件，在按下手指后，这类touchstart还是touchend都会在click之前发生，就会产生所谓点透。
在上图的单击按钮上面，通过touchstart在按下手指后立即关闭遮罩，没有延时关闭迅速，但是在手指按下的地方又接着发生了click事件，而此时遮罩层都已经关闭了又还发生了click事件，导致click事件被点在button按钮上，按钮的click事件处理函数就被触发了，如果这里不是button，而是个input，会导致点这里关闭了遮罩而下面的input输入框被聚焦弹出了输入键盘，这就是“点透”。在单页应用，也会一个页面都切换了，click被点了新的页面上。
移动端实现tap自定义事件
对于自定义DOM事件通过btn.addEventListener('tap',callback,false)，使用浏览器原生addEventListener()绑定，这要通过CustomEvent()类来实现。
var btn=document.getElementById('btn');
//给button按钮绑定tap事件
btn.addEventListener('tap',function(){
alert('tap事件执行');
//自定义tap DOM事件
var event=new CustomEvent('tap',{
bubbles: true,
cancelable: true
//触发btn上的tap事件
btn.dispatchEvent(event);
当然实际中btn.dispatchEvent(event)肯定要放在其他的事件回调中，不然没办法响应用户操作。
如果只是为了要tap，这段代码可以取代引入zepto、zeopo.touch还是其他的这类文件。当然由于也是借助touched，因此前提也必需设置&meta&禁止页面缩放才能避免点透。其中给setTimeout()设置了30毫秒的延时，实际上手机浏览器计时并不准确，延时定短了tap有可能就在click前面执行了。虽然松开手指时touchend和click会一前一后触发，但之间的间隔并不是每次都一样，少的时候只有几毫米，多的时候有二三十毫秒，因此tap需要延时在30毫秒之后，保证它在click之后执行。
如果要在pc上也兼容可以再通过mousedown、mouseup、mousemove来处理，原理一样，只是做个pc与移动判断。如果要实现其他的诸如，手指左滑动右滑动事件还是长按等等之类自定义事件，原理基本差不多。
0 收藏&&|&&8
你可能感兴趣的文章
1 收藏，328
6 收藏，2.5k
12 收藏，1.1k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
我要该，理由是：zepto.js使用时候你会遇到哪些坑
zepto.js的注意点
移动端开发类库为什要用zepto，为什么不是 jQuery 呢？因为 jQuery 的目标是兼容所有主流，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。 而 Zepto 只针对移动端浏览器编写，因此体积更小、效率更高，更重要的是，它的 API 完全仿照 jQuery ，所以学习成本也很低。
但是在开发过程中，我发现 Zepto 还远未成熟，其中包含了一些或大或小的&坑&，与 jQuery 的差距还是很明显的，所以写篇文章记录下，希望对后来者有帮助
注意，本文撰写时 Zepto 版本为 1.0 正式版
从哪里下载 Zepto
这个问题看起来很蠢，从官网下载不就行了嘛！可是你有没有发现下载链接上面有行小字呢？
Th a list of all modules is available in the README.
在这个 README 里面你会惊奇地发现，Zepto 中有 14 个模块，而官网提供的标准版里面只有 7 个模块！而且居然不包含对移动端开发非常重要的 touch 模块（提供对触摸事件的支持）！
所以我的建议是，不要从官网下载，而是从 Github 下载了源代码之后自己 Build 一个版本，这样你可以自行挑选适合的模块。比如我挑选的模块是这么几个：
polyfill，zepto，detect，event，ajax，form，fx 这7个就是标准版包含的模块 fx_methods 有了这个模块之后，.show() .hide() 等几个方法才能支持动画了，比如 .show(&fast&) data 提供对 .data() 方法的完整支持，像 jQuery 一样用内存对象存储 assets 移除 img 元素后做一些特殊处理，用来清理内存 selector 更多的选择器的支持，后面会提到 touch 对触摸事件的支持，比如 tap 事件
如果你对 Node 不了解不知道如何 Build 的话，可以下载我的版本
不要用 click 事件，用 tap 代替
这个估计已经广为人知了，因为 click 事件有 200~300 ms 的延迟，为了更快的响应，最好用 Zepto 提供的 tap 事件
不相信的话，可以用以下代码测试一下
var t1,t2;
$('#id').tap(function () {
t1 = Date.now();
$('#id').click(function () {
t2 = Date.now();
alert(t2 - t1);
选择器的支持
郑重提醒，:text :checkbox :first 等等在 jQuery 里面很常用的选择器，Zepto 不支持！
原因很简单，jQuery 通过自己编写的 sizzle 引擎来支持 CSS 选择器，而 Zepto 是直接通过浏览器提供的 document.querySelectorAll 接口。
这个接口只支持标准的 CSS 选择器，而上面提到的那些属于 jQuery 选择器扩展，所以仔细看看这个网页，注意一下这些选择器。
当然也有好消息，就是上面提到的 selector 模块，如果有这个模块的话，能够支持 部分 的 jQuery 选择器扩展，列举如下：
:visible :hidden :selected :checked :parent :first :last :eq :contains :has
元素的尺寸计算
首先 Zepto 没有 .innerHeight() .outerWidth() 等四个方法，其次，它的 .height()/.width() 方法也不完善，对于 display:none 的元素，计算出的高宽都是 0
而这在 jQuery 里面是没有问题的，因为 jQuery 针对这种元素，会先设置其 css 样式设置为 position: &absolute&, visibility: &hidden&, display: &block& 。
计算完高宽后再恢复，参见
/jquery/jquery/blob/master/src/css.js#L460
如果遇到这种特殊情况，可以参考 jQuery 写一个类似的方法
.prop() 方法的陷阱
有次我要把一个文本框置为只读，写了这么一行 (&#text&).prop(&readonly&,true)结果死活不工作
找了半天才发现，正确的写法是这样(&#text&).prop(&readOnly&, true) ，如果你居然看不出两者的差别，那么悄悄提示你：注意大小写！
翻了一下相关的文档，原来只读属性的正确拼法确实是 readOnly，可是在 jQuery 里面上一段代码却能正常工作。于是到 jQuery 源码里面一找才发现，还有这么一段 /jquery/jquery/blob/master/src/attributes.js#L466
jQuery.each([
&tabIndex&,
&readOnly&,
&maxLength&,
&cellSpacing&,
&cellPadding&,
&rowSpan&,
&colSpan&,
&frameBorder&,
&contentEditable&
], function() {
jQuery.propFix[ this.toLowerCase() ] =
从这里也能看到，jQuery 的成熟度真是难以超越，因为他把我们都惯坏了&&
考虑到这段代码比较简单，我厚颜无耻地抄袭了一下然后给 Zepto 提了一个 pull request ，如果你们喜欢这种无脑的用法，可以去评论表达支持（记得用英文）
这个 PR 已经被 Merge
.show() 的动画效果
如果没有 fx_mehods 模块的话，.show() 方法是不支持动画的，不过有了这模块后，动画的支持还是有点小问题，比如这么一段 HTML
如果你调用 $(&p&).show(&fast&) ，那么动画完成后你看到的不会是一个半透明的元素，而是全黑不透明的
因为 Zepto 的 .show() 动画实现的很简单，没有高宽的变化，而是将透明度从 0 逐渐变为 1，所以元素上原来设置的透明度就被替代了。
这种情况下，可以用 .fadeIn() 方法来替代 .show()
看到这里相信你已经了解为什么我说& Zepto 还远未成熟&，目前它其实还仅仅处于&能用&，远未达到 jQuery &好用&的地步
最后，关于整个 HTML5 触屏版的，我有篇 Slide 做了总结，本文只是其中关于 Zepto 部分的详细阐述，感兴趣的可以去看看。
zeptojs的注意点 不要用 click 事件用 tap 代替 Zepto 对 CSS 选择器的支持 元素的尺寸计算 prop 方法的陷阱 show 的动画效果。Zepto Click点透情况解决办法 - CSDN博客
Zepto Click点透情况解决办法
Zepto Click点透情况解决办法
一、如何发生
点透事件据我的理解，就是因为Zepto在Click事件上有300毫秒的延迟，为了跟其他各种各样的乱七八糟的东西兼容。但是很不凑巧，我们是在一个模态弹出框上绑定了这样一个延迟300ms的点击事件，点击事件又会被冒泡到最下层，而最下层刚好是一个输入框。这样事件就会被这个输入框给捕捉，导致最上层事件无法触发（具体更深层次原因未知，只是知道不能被触发）。
二、解决办法
最简单，是实用，又不用增加其他代码量的方法就是将Click点击事件替换成touchend事件替换。例如：
$("#save_and_back").on("touchend",function(e){
save_article(article_data).then(function(res){
location.href = "home.html";
e.preventDefault();
这样子就在移动端上很完美地解决了，没有了点透情况。但是，尼玛，PC端上又不兼容了。
突发奇想下，能不能同时绑定click和touchend事件，这样是不是就完美的解决了。
$("#save_and_back").on("touchend",function(e){
save_article(article_data).then(function(res){
location.href = "home.html";
e.preventDefault();
$("#save_and_back").on("click",function(e){
save_article(article_data).then(function(res){
location.href = "home.html";
e.preventDefault();
果然，真的解决了问题。查询一下原因：
事件优先级为： touchstart & touchend & click 。
在PC端上，没有touchend事件，只有click事件被绑定上了。
在移动端上，绑定了touchend和click事件，但是touchend事件优先级比click高，并且阻止了事件继续冒泡。所以两个端上都能完美实现效果，具体还有没有其他的问题暂时不得而知。
本文已收录于以下专栏：
相关文章推荐
首先，什么是zepto tap事件穿透？
tap事件穿透就是，有多个层级上有绑定事件，最上层的绑定了tap事件，下层绑定了click事件，在执行完上层事件后会触发下层事件，进而出现事件穿透。如果下层是...
/******如有雷同
纯属巧合 ********/
我们就touch的几种简单事件进行解析
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
...
Zepto Click点透情况解决办法
一、如何发生
点透事件据我的理解，就是因为Zepto在Click事件上有300毫秒的延迟，为了跟其他各种各样的乱七八糟的东西兼容。但是很不凑巧，我们是在一个...
showTypeList:function(){
$('#search-box').on('tap','.input-tab-txt',function(event){...
1. Zepto 对象 不能自定义事件
例如执行： $({}).bind('cust', function(){});
TypeError: Object has no method ...
手机端click事件300ms延迟问题
问题由来：双击事件
假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览...
1、创建并初始化一个指定的DOM事件。如果给定properties对象，使用它来扩展出新的事件对象。默认情况下，事件被设置为冒泡方式；这个可以通过设置bubbles为false来关闭。
1，安装好Fiddler后，我们一般是还抓不了数据的，需要在Fiddler和代理浏览器上做一些设置。
在Fiddler， 点击rules——Fiddler Options
——选中这些选项
Click once 发布出错，应用程序验证未成功，无法继续
请各位朋友帮帮我吧，使用微软的ClickOnce技术发布软件，在原来的系统中正常使用，移交到客户的系统时出现问题
应用程序验证未成功，无...
他的最新文章
讲师：王禹华
讲师：宋宝华
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)移动端H5，Hybird开发点击穿透事件处理 - CSDN博客
移动端H5，Hybird开发点击穿透事件处理
现象描述：&页面中存在上下两个层，上层元素具有表单，链接或者绑定相应事件，上层元素点击或触摸，导致上层DOM改变，下层中同样位置的 元素触发点击事件。这种现象就是点击穿透（Ghost Clicks）。
要理解这种现象，首先要了解移动端的相关事件 —— 触摸(Touch)事件，点击(Click)事件。以及移动端事件触发的顺序关系：
touchstart --& mouseover(有的浏览器没有实现) --& mousemove(一次) --&mousedown --& mouseup --& click --&touchend
Touch 事件中，常用的为 touchstart, touchmove, touchend 三种。除此之外还有touchcancel。&注意，原生事件中并没有tap事件。下面会解释tap事件怎么产生的。
事件描述如下：
touchstart
手指接触屏幕时立即触发
移动或拖拽
取决于系统和浏览器
手指离开屏幕时立即出发
而Touch事件的触发一般通过手指，还会存在多点触控，拖拽方向等情况。列出几个重要参数如下：
屏幕中每根手指信息列表
targetTouches
和touches类似，把同一节点的手指信息过滤掉
changedTouches
响应当前事件的每根手指的信息列表
代码获取如下：
elemenrRef.addEventListener('touchstart', function(e) {
console.log(e.touches, e.targetTouches, e.changedTouches);
手指触发触摸事件的过程如下：
touchstart --& mouseover(有的浏览器没有实现) --& mousemove(一次) --&mousedown --& mouseup --& click --&touchend
由此，我们可以在 ontouchstart 事件上记录开始触摸开始，ontouchend 记录触摸结束信息。 通过上述这些参数，很容易的去计算幽冥点击的时间，以及点击穿透的相关信息，包括响应的坐标情况。
问题来了，click 事件什么时候触发？
浏览器在 touchend 之后会等待约 300ms ，如果没有 tap 行为，则触发 click 事件。 而浏览器等待约 300ms 的原因是，判断用户是否是双击（double tap）行为，双击过程中就不适合触发 click 事件了。 由此可以看出 click 事件触发代表一轮触摸事件的结束。
上面说到原生事件中并没有 tap 事件，可以参考经典的 zepto.js 对 singleTap 事件的处理(遗憾的是在部分浏览器中，依然存在点击穿透的问题)。可以看出，singleTap 事件的触发时机 —— 在 touchend 事件响应 250ms 无操作后，触发singleTap。因此，点击穿透的现象就容易理解了，在这
300ms 以内，因为上层元素隐藏或消失了，由于 click 事件的滞后性，同样位置的 DOM 元素触发了 click 事件（如果是 input 则触发了 focus 事件）。在代码中，给我们的感觉就是 target 发生了飘移。
如何处理点击穿透（思路）
1. 触摸开始时&touchstart 事件触发时，preventDefault()。毫无疑问，很容易想到这一点，而且也从根本上解决了这个问题。但是，它有一个避免不了或者说引入了很大的缺陷，页面中DOM 元素无法再进行滚动了。这个方法显然不能满足我们的需求，但是这个思路其实可以给我们更多的启发，比如说 iscroll 只允许横向滚动的实现，相关实现这里暂且不表。
2. 触摸结束时&touchend 事件触发时，preventDefault()。看上去好像没有什么问题，但是，很遗憾的是不是所有的浏览器都支持。
3. 禁止页面缩放&通过设置meta标签，可以禁止页面缩放，部分浏览器不再需要等待 300ms，导致点击穿透。点击事件仍然会触发，但相对较快，所以 click 事件从某种意义上来说可以取代点击事件， 而代价是牺牲少数用户（click 事件触发仍然较慢）的体验。
&meta name=&viewport& content=&width=device-width, user-scalable=no&&
移动端chromiun 和 iOS 9.3＋ 可以用 CSS 属性来阻止元素的双击缩放进而取消点击穿透的延迟：
-ms-touch-action:
touch-action:
4. CSS3 的方法&虽然主要讲的是事件，但是有必要介绍一个 CSS3 的属性 —— pointer-events。
pointer-events:
auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all |
pointer-events 属性有很多值，有用的主要是 auto 和 none，其他属性为 SVG 服务。
可见移动端开发还是可以用的。
默认值，鼠标或触屏事件不会穿透当前层
元素不再是target，监听的元素变成了下层的元素（如果子元素设置成 auto，点击子元素会继续监听事件）
5. 处理点击事件 —— Touch to Click&最靠谱的方案还是从点击事件的根源上解决问题。用 js 去判断幽冥点击，然后阻止点击穿透。这种方式显然可以实现，缺点是阻止点击穿透时需要小心，不要导致原生的 HTML 元素（如：链接，多选框，单选框）无法正常运行。
通过上文中介绍的 touches，targetTouches，changedTouches 参数，我们可以构建出这样的，可以统计出点击穿透的时间，以及已经响应的情况。
preventDefault()
点击穿透时间
点击穿透区域
touchstart
禁止缩放页面
禁止缩放页面
Safari Mobile iOS 5.1.1
370ms after end
370msafter end
touchstart
touchstart
Safari Mobile iOS 6.1.3
370ms after end
370msafter end
touchstart
touchstart
Safari Mobile iOS 7.1.1
370ms after end
370msafter end
touchstart
touchstart
Android 2.3.7
410ms after end
410msafter end
touchstart
touchstart
Android 4.0.4
300ms after end
10ms after end
touchstart
touchstart
Android 4.1.2
300ms after end
300msafter end
touchstart
touchstart
Android 4.2.2
300ms after&start
10ms after end
touchstart
IE10 Windows Phone 8
310ms after end
10ms after end
Blackberry 10
260ms after end
10ms after end
touchstart
touchstart
Chrome for iOS
360ms after end
360msafter end
touchstart
touchstart
Chrome for Android
300ms after&start
10ms after end
touchstart
Firefox for Android
300ms after end
10ms after end
touchstart
由此可以看出： 1. 点击穿透受浏览器和页面是否缩放影响 2. 点击穿透有两种情况：快速情况有 10ms 慢速情况有 300ms 3. 在 touchend 时间上调用 preventDefault() 可以阻止多数情况的点击穿透
代码上处理建议如下：
在touchend事件上调用 preventDefault()在一次成功的点击后，建议接下来的 500ms 以内取消所有的 click 事件。分析点击事件，判断如果是慢速点击穿透，则取消所有 click 事件，如果是快速点击穿透，取消触摸事件 50ms以内的 click 事件即可。
别的参考思路（开源库fastclick），取消 click 事件，用touchend 模拟 快速点击行为。
本文已收录于以下专栏：
相关文章推荐
引用bootstrap的dialog组件，不过在移动端，dialog弹出，body还能滚动。
document.addEventListener('touchmove', function (even...
/解决移动端滚动穿透样式/
body.modal-open {
width: 100%;
//scrollingElement兼容性代码
移动端页面touch会"穿透"的解决方案
1.移动端页面touch会穿透
是指当H5页面在移动端显示时，因为click事件有300ms的延迟，所以最好用touch 事件，touch事件分为
移动端滚动穿透问题完美解决方案
引用bootstrap的dialog组件，不过在移动端，dialog弹出，body还能滚动。
document.addEventListener('touchmove', function (e...
今天做移动端项目时遇到的一个问题，带来了不少麻烦。
pc端的常用方法是 ：
$('body').css({
overflow: 'hidden',
height: $(wind...
移动页面点击穿透问题解决方案
http://www.ayqy.net/blog/移动页面点击穿透问题解决方案/
一.click与300ms延迟
移动浏览器提供一个特殊的功能：双击（...
一.click与300ms延迟
移动浏览器提供一个特殊的功能：双击（double tap）放大
300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double...
一.click与300ms延迟
移动浏览器提供一个特殊的功能：双击（double tap）放大
300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（doub...
移动页面滚动穿透解决方法目前有多种解决方案，我介绍下几种方案：
解决方案1：阻止冒泡。//关键代码
$(".sliders,.modals").on("touchmove",function(e...
他的最新文章
讲师：王禹华
讲师：宋宝华
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)