移动端touch click事件的比较 + 点透现象

最新推荐文章于 2024-03-16 17:50:45 发布

飞扬_柳絮

最新推荐文章于 2024-03-16 17:50:45 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.csdn.net/tjcjava/article/details/80835252

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文详细解释了移动端点透现象的发生原理及解决方法。通过分析touch事件与click事件的交互，探讨了点透现象出现的具体条件，并提供了有效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端touch click事件的比较

1、touch click事件的执行顺序: touchstart > touchmove > touchend > click
2、touchmove click事件互斥,即touchmove触发执行，click事件不再执行

3、touch阶段取消掉 click 事件：touch事件内调用：e.preventDefault()

点透现象

点透发生的条件:

A 和 B不是后代继承关系(如果是后代继承关系的话，就直接是冒泡之类的话题了)
A发生touch(也可以是click)后立即消失,B事件绑定click

A z-index大于B，即A显示在B浮层之上

点透发生的原因:

当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了

示例代码：

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-touch-fullscreen" content="YES" />
		<script type="text/javascript">
			(function(doc, win, undefined) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if(clientWidth === undefined) return;
						docEl.style.fontSize = (clientWidth / 750) * 100 + 'px';
					};
				if(doc.addEventListener === undefined) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false)
            })(document, window);
		</script>
		<style type="text/css">
            #parent {
                position: relative;
            }
            #up {
                position: absolute;
                width: 100%;
                height: 4rem;
                z-index: 1;
                background: red;
            }
            #down {
                width: 100%;
                height: 5rem;
                background: green;
            }
        </style>
	</head>
	<body>
        <div id="parent">
          <div id="up">上层div</div>
          <div id="down" class="dowm">下层div</div>
        </div>
    </body>
    <script type="text/javascript">
        let up = document.getElementById('up');
        let down = document.getElementById('down');
        up.addEventListener('touch', function(e) {
          up.style.display = 'none';
        });
        up.onclick = function() {
          console.log('down莫名被点击了');
        }
    </script>
</html>

解决方式：

1、A touch 事件取消click事件即 e.preverDefault
2、A 元素延迟0.3s后消失