2020-07-17 14:47发布
1、只用touch
最简单的解决方案，完美解决点击穿透事件
把页面内所有click全部换成touch事件（touchstart、touchend、tap）,需要特别注意a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span+tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span+touchend就可以了。毕竟tap需要引入第三方库
不用a标签其实没什么，移动app开发不用考虑SEO，即便用了a标签，一般也会去掉所有默认样式，不如直接用span
2、只是用click
下下策，因为带来300ms延迟，页面内任何一个滴定仪监护都将增加300ms延迟，想想都慢
不用touch就不会存在touch之后300ms触发click的问题，如果交互性要求不高可以这么做， 强烈不推荐 ，快一点总是好的
3、拿个东西来挡住
比较笨的方法，不推荐用
4、tap后延迟350ms在隐藏mask
改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的
只需要针对mask做处理就行，改动非常小，如果要求不高的话，用这个比较省力
5、pointer-events
比较麻烦且有缺陷，不建议使用
mask隐藏后，给按钮下面元素添加上pointer-events：none;样式，让click穿过去，350ms后去掉这个样式，恢复响应
缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现
在下面元素的事件处理器里做检测（配合全局flag）
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 web-马赏 的问题《移动端点击穿透问题怎么解决》','http://www.shouhuola.com/answer/24073/45753.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
1、只用touch
最简单的解决方案，完美解决点击穿透事件
把页面内所有click全部换成touch事件（touchstart、touchend、tap）,需要特别注意a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span+tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span+touchend就可以了。毕竟tap需要引入第三方库
不用a标签其实没什么，移动app开发不用考虑SEO，即便用了a标签，一般也会去掉所有默认样式，不如直接用span
2、只是用click
下下策，因为带来300ms延迟，页面内任何一个滴定仪监护都将增加300ms延迟，想想都慢
不用touch就不会存在touch之后300ms触发click的问题，如果交互性要求不高可以这么做， 强烈不推荐 ，快一点总是好的
3、拿个东西来挡住
比较笨的方法，不推荐用
4、tap后延迟350ms在隐藏mask
改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的
只需要针对mask做处理就行，改动非常小，如果要求不高的话，用这个比较省力
5、pointer-events
比较麻烦且有缺陷，不建议使用
mask隐藏后，给按钮下面元素添加上pointer-events：none;样式，让click穿过去，350ms后去掉这个样式，恢复响应
缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现
在下面元素的事件处理器里做检测（配合全局flag）
一周热门 更多>