移动端的touch click事件的理解+点透
移动端在touch上一共有4个事件
这里会结合click对上面的事件进行讨论, touch发生在click之前
先上段代码,直观感受一下
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#level0 {
/* width: 500px;
height: 500px; */
} #level1-0 {
background: red;
width: 500px;
height: 500px;
} #level1-1 {
background: green;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="level0">
<div id="level1-0">
</div>
<div id="level1-1">
</div>
</div>
</body>
<script type="text/javascript"> var level10 = document.getElementById("level1-0"); level10.addEventListener('touchstart', function(e) {
console.log(1);
}); level10.addEventListener('touchmove', function(e) {
console.log(2);
}); level10.addEventListener('touchend', function(e) {
console.log(3);
}); level10.onclick = function() {
console.log(5);
} document.body.onclick = function() {
console.log('6');
} </script>
</html>
level10.addEventListener('touchstart', function(e) {
console.log(1);
e.preventDefault();
});
点击的时候 发现 只有 1 3, 说明click被阻止了,当然在touchend里面加效果也一样,所以 在touch事件里面加 e.preventDefault可以取消系统产生的click事件, 当然不会阻止后面的touch事件。
用个具体的例子看看 如何解决点透问题
产生点透问题的原因, 可以先看看代码吧
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#level0 {
/* width: 500px;
height: 500px; */
position: relative;
} #level1-0 {
position: absolute;
z-index: 1;
background: red;
width: 500px;
height: 500px;
} #level1-1 {
background: green;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="level0">
<div id="level1-0">
</div>
<div id="level1-1">
</div>
</div>
</body>
<script type="text/javascript"> var level10 = document.getElementById("level1-0");
var level11 = document.getElementById("level1-1"); level10.addEventListener('touchstart', function(e) {
level10.style.display = 'none';
}); level11.onclick = function() {
console.log('level11莫名被点击了');
} </script
</html>
level11莫名被点击了
, 这就是点透- A 和 B不是后代继承关系(如果是后代继承关系的话,就直接是冒泡子类的话题了)
- A发生touch, A touch后立即消失, B事件绑定click
- A z-index大于B,即A显示在B浮层之上
当手指触摸到屏幕的时候,系统生成两个事件,一个是touch 一个是click,touch先执行,touch执行完成后,A从文档树上面消失了,而且由于移动端click还有延迟200-300ms的关系,当系统要触发click的时候,发现在用户点击的位置上面,目前离用户最近的元素是B,所以就直接把click事件作用在B元素上面了
.level10.addEventListener('touchend', function(e) {
e.preventDefault();
});
当然点透问题,还有其他的解决方法,关键是 要么是需求本次系统生成的click事件,要么是当系统触发click的时候,当前的触发touch的那个dom节点还存在。比如将其一延迟3s在关闭
setTimeout(() => {
level10.style.display = 'none';
}, 300);
移动端的touch click事件的理解+点透的更多相关文章
- 移动端的传统click事件延迟和点透现象
一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...
- jquery关于on click事件的理解
jquery关于on click事件的理解 <pre><a style="min-width:60px; margin-left:6px;" wenzhangid ...
- 开发移动端web页面click事件失效问题
这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的pr ...
- 重载jquery on方法实现click事件在移动端的快速响应
额,这个标题取的还真是挺装的... 其实我想表达的是jquery click事件如何在移动端自动转换成touchstart事件. 因为移动端click事件会比touchstart事件慢几拍 移动设备某 ...
- 移动端tap或touch类型事件的点透问题认识
1.什么是点透? 举例说明:下图B元素是黄色方块,B元素中包含了C元素,C元素是一个a链接,本身自带click事件按,然后又一个半透明的粉色元素A遮盖在B元素上(看图中A元素是覆盖在B元素上的,不然B ...
- 移动端触屏click点击事件延迟问题,以及tap的解决方案
在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...
- 分享一个移动项目中消除click事件点击延迟的方法
对于前端工程师来说,apicloud无疑给我们提供了很好的平台,有各种各样的模块供我们使用,但是在实际项目的时候,很大部分的代码,还是需要我们用html css js来实现的.但是呢,移动端页面对于c ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端WEB开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
随机推荐
- 解决:File "/usr/lib/python2.7/site-packages/more_itertools/more.py", line 340 def _collate(*iterables, key=lambda a: a, reverse=False): 的报错
cyberb commented on 15 Apr Traceback (most recent call last): File "/snap/users/x1/python/bin/l ...
- MQTT研究之EMQ:【EMQX使用中的一些问题记录(4)】
最近比较忙,有些关于EMQ的使用问题,没有时间记录了,趁这个周末抽点时间,将最近遇到的,觉得比较有价值的一个问题,分享给大家吧. 这里是针对前面的一篇博客,做的一个深入研究,关于订阅系统总线判断设备上 ...
- Android Camera2/HAL3
Android : Camera2/HAL3 框架分析 https://www.cnblogs.com/blogs-of-lxl/p/10651611.html Android : Camera之ca ...
- JAVA中String空对象的字符串拼接
今天使用JSONObject中get一个不存在的对线,最后拼接成sql语句插入数据库时,最后数据库中的值为字符串'null',而不是空对象. 追踪许久才发现自己的java白学了. java strin ...
- 梳理数据库(MySQL)的主要知识点
一.数据库类型 常用的关系型数据库 Oracle:功能强大,主要缺点就是贵 MySQL:互联网行业中最流行的数据库,免费.关系数据库场景中的功能 MySQL 都能很好的满足 MariaDB:MySQL ...
- 【Git】Gitlab添加SSH key可以pull不能push的问题
背景:使用webhook 钩子进行代码的自动更新 完整过程: https://zhuanlan.zhihu.com/p/93223263 问题: 在进行git pull 时候.报错了 这是gitlab ...
- iOS 基于 itemServices 进行本地安装 ipa 应用安装包
itemServices 协议 itemServices 是苹果推出的一款协议.基于这款协议,我们在本地部署一个服务器,将 ipa 包存放到本地服务器.然后,测试人员只要通过 iOS 测试设备的 Sa ...
- WEBSHELL-恶意代码检测
静态查杀 提取特征写成规则库,调用规则库查杀.基于规则,会比较快,但漏报.误报会比较明显,一般的Webshell一句话木马变形混淆会比较多. yara规则 $eval = /(<\?php|[; ...
- Java多线程看这一篇就足够了(吐血超详细总结)
进程与线程 进程是程序的一次动态执行过程,它需要经历从代码加载,代码执行到执行完毕的一个完整的过程,这个过程也是进程本身从产生,发展到最终消亡的过程.多进程操作系统能同时达运行多个进程(程序),由于 ...
- Android Studio 开发
Android studio安装与配置 (收藏) https://www.cnblogs.com/gufengchen/p/10991886.html ------------------------ ...