H5移动页面的touch事件与点击穿透问题

先举一个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta content="width=device-width,height=device-height,initial-scale=1.0"><title>Title</title><style>*{padding:0;margin:0;}html,body{width: 100%;height: 100%;}.mask {position: absolute;width: 100%;height: 100%;background: rgba(26,26,26,0.2);}a{display: block;width: 100%;height: 100%;font-size: 2rem;}</style>
</head>
<body><div class="mask"></div><a href="http://www.baidu.com">去百度</a>
</body>
<script src="jquery.js"></script>
<script>$(document).on('touchstart', '.mask', function() {$(this).hide();})
</script>
</html>

简介：上边例子中，a标签链接到百度，a标签上方漂浮这一个蒙层，js的功能是实现点击蒙层后蒙层消失。

效果：点击蒙层，蒙层消失；300毫秒后，下边的a标签的click事件被触发，网页跳转到百度，即发生了事件穿透。

把js代码换成以下写法：

<script>$(document).on('click', '.mask', function() {$(this).hide();})
</script>

效果：点击蒙层，蒙层消失，但存在300毫秒延迟。

解释：

一.click与300ms延迟
移动浏览器提供一个特殊的功能：双击（double tap）放大

300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms。

移动事件提供了touchstart、touchmove、touchend却没有提供tap支持，主流框架（库）都是手动实现了自定义tap事件，以求消除300ms延迟，提高页面响应速度。对于简单的页面，可以把touchstart或者touchend当作tap来用，但存在一些问题，比如手指接触目标元素，按住不放，慢慢移出响应区域，会触发touchstart事件执行对应的事件处理器（本不应该触发），touchend事件也存在类似的问题。

此外，使用原生touch事件也存在点击穿透的问题，因为click是在touch系列事件发生后大约300ms才触发的，混用touch和click肯定会导致点透问题，下面详细介绍

二.点击穿透问题

①点击蒙层（mask），蒙层消失后发现触发了按钮下面元素的click事件，蒙层绑定的是touch事件，而按钮下面元素绑定的是click事件（a默认为click事件），touch事件触发之后，蒙层消失，300ms后这个点的click事件触发，事件的target自然就是蒙层下面的元素，蒙层此时已经消失。

②如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转，因为a标签跳转默认是click事件触发，所以原理和上面的完全相同。

三、解决方法
①只用touch：把页面内所有click全部换成touch事件（touchstart、’touchend’、’tap’），需要特别注意a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span + tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span + touchend就可以了，毕竟tap需要引入第三方库

缺点：不利于seo（因为没有a标签，内链外链之类的也就没有了）

②只用click。缺点：会带来300ms延迟。

③使用fastclick消除300毫秒延迟，随后只用click。比较好用的解决方案，只是多加载了几K的资源。

④遮挡：给mask的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画duration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。

注：代码中本人使用的是JQuery，如果是开发，推荐使用移动端的js库zepto.js，用法跟JQuery差异不大，touchstart请换成tap（相当于pc端的click），但依然会存在延迟，解决方法如上。

tap：原生的touch事件本身是没有tap的，js库里提供的tap事件都是模拟出来的，单次点击300ms内再次点击则判定为double tap。

H5移动页面的touch事件与点击穿透问题相关推荐

touch事件以及点击穿透的三种解决方法(移动端)
移动端 touch事件以及touch事件点击穿透的解决方法提示: touchstart->touchmove->touchend ----> click 上面的四种点击都可以在移动 ...
h5手指滑动划线touch事件
目录效果连线说明 HTML CSS JS 效果首先我们来看下效果: 连线说明 ① box_1206是一个宽750px,高1206px的盒子,垂直居中,一般来说内容都可以写在这里面 ②判断手指滑动 ...
移动端事件 click touch tap swiper 点击穿透的问题
click事件 click事件在移动端会有200-300ms的延迟,是因为手机上双击屏幕,缩放功能的存在.在手机上打开页面,快速双击时,页面会被放大.所以当你在点击第一次的时候,系统会等200-300 ...
深入cocos2d-x中的touch事件
深入cocos2d-x中的touch事件在文章cocos2d-x中处理touch事件中简单讨论过怎样处理touch事件, 那么今天来深入了解下cocos2d-x中是怎样分发touch事件的. 我们最 ...
H5案例分享：移动端滑屏 touch事件
移动端滑屏 touch事件移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
uni-app的h5页面的onHide/onUnload方法不触发的问题解决
背景目的:对h5页面进行埋点过程中,需要对页面浏览时长进行统计,通过生命周期的监听上传埋点日志预设方案:通过个页面的onShow/onHide/onUnload生命周期对页面的展示/隐藏/销毁进行 ...
h5滚动时侧滑出现_H5案例分享：移动端滑屏 touch事件
touchstart: //触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove: //在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止 ...
demo h5 touch 移动_H5案例分享：移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向方法一当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
php h5支付没有返回app中,很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法...
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包 ...

H5移动页面的touch事件与点击穿透问题

H5移动页面的touch事件与点击穿透问题相关推荐

最新文章

热门文章