CSS 移动端事件点透 css touch-action
bigegpt 2024-10-12 06:28 4 浏览
移动端的点透：当上层元素发生点击的时候, 下层元素也有点击(焦点)特性, 在300ms之后, 如果上层元素消失或者隐藏,
目标点就会"漂移"到下层元素身上, 就会触发点击行为。
<a href="http://baidu.com">百度一下</a>
<p>pc点击事件</p>
<div></div>
<script type="text/javascript">
//pc端事件是可以在移动端使用的 但是存在一些问题(事件点透)-pc端事件比移动端事件慢300ms
var oDiv = document.getElementsByTagName("div")[0];
var oP = document.getElementsByTagName("p")[0];
oP.onclick = function(){ //pc端事件
this.style.color = "orange";
}
oDiv.addEventListener("touchend",function(){ //移动端事件
this.style.display = "none";
},true);
</script>如果我们在百度一下PC点击事件上方进行点击会发现当红色区域隐藏后还会触发其自身的事件。这种现象就是事件点透。
成因
我们上面说过, 移动设备能够响应click事件, 不过比较慢, 这是为什么?
因为click事件触发之后, 要等200ms到300ms左右, 因为浏览器有一些默认的手指快捷操作, 比如：快速双击两次屏幕视口会放大, 弹出辅助菜单等等。
大家用手机上网的时候, 尤其看一些PC端网站, 双击屏幕, 当前视口就变大了。
本质上：PC端事件比移动端的事件略慢, 大概是在300ms左右。所以我们也称这种现象为300毫秒延迟。
实例: 事件点透
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 5vw;
}
div{
width: 100vw;
height: 50vh;
text-align: center;
background-color: rgba(255,0,0,0.5);
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<a href="http://xxxxxx.com">JavaScript</a>
<mark></mark>
<span>我没有点击行为</span>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.addEventListener("touchstart",function(){
this.style.display = "none";
//this.style.backgroundColor = "rgba(0,255,0,0.5)";
},false)
var mark = document.getElementsByTagName("mark")[0];
mark.onclick = function(){
this.style.color = "red"; //字体变成红色
}
//事件点透：当上层元素(div)有点击行为时,当上层元素消失,这种点击行为会飘到下层(mark)(点击事件、具有点击行为)元素身上
//还需要注意上层元素是移动端事件 下层元素如果执行事件必须是PC端事件
//原因：300ms延迟
</script>
</body>
</html>解决方法: 在移动端中全部使用移动端事件代替PC端事件 ontouchstart
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 5vw;
}
div{
width: 100vw;
height: 50vh;
text-align: center;
background-color: rgba(255,0,0,0.5);
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<a href="http://xxxxxx.com">JavaScript</a>
<mark>JavaScript</mark>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.addEventListener("touchstart",function(){
this.style.display = "none";
//this.style.backgroundColor = "rgba(0,255,0,0.5)";
},false)
var mark = document.getElementsByTagName("mark")[0];
//在移动端中全部使用移动端事件代替PC端事件
mark.ontouchstart = function(){
this.style.color = "red";
}
//事件点透：当上层元素有点击行为时,当上层元素消失,这种点击行为会飘到下层(点击事件、具有点击行为)元素身上
//还需要注意上层元素是移动端事件 下层元素如果执行事件必须是PC端事件
//原因：300ms延迟
</script>
</body>
</html>超链接如何解决点透
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 5vw;
}
div{
width: 100vw;
height: 50vh;
text-align: center;
background-color: rgba(255,0,0,0.5);
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<!--<a href="http://xxxxxx.com">JavaScript</a>-->
<!--<p data-url="http://xxxxxx.com">我来替换那些具有点击行为的元素比如a</p>
<p data-url="http://qq.com">我来替换那些具有点击行为的元素比如a</p>
<p data-url="http://baidu.com">我来替换那些具有点击行为的元素比如a</p>
<a data-href="http://baidu.com">百度</a>
<a data-href="http://163.com">网易</a>
<a data-href="http://qq.com">腾讯</a>
<a data-href="http://taobao.com">淘宝</a>
<p>我就是凑热闹的</p>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.addEventListener("touchstart",function(){
this.style.display = "none";
//this.style.backgroundColor = "rgba(0,255,0,0.5)";
},false)
//var ps = document.getElementsByTagName("p");
var ps = document.querySelectorAll("p[data-url]");
for(var i=0;i<ps.length;i++){
ps[i].ontouchstart = function(){
window.location.href = this.getAttribute("data-url");
}
}
</script>
</body>
</html>
相关推荐
- Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点
-
在分布式系统中，Redis作为高性能的内存数据库，其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案：主从复制、哨兵模式和Cluster模式，帮助开发者...
- redis的主从复制，读写分离，主从切换
-
当数据量变得庞大的时候，读写分离还是很有必要的。同时避免一个redis服务宕机，导致应用宕机的情况，我们启用sentinel(哨兵)服务，实现主从切换的功能。redis提供了一个master,多个sl...
- # Redis 入门到精通(九)-- 主从复制(3)
-
#Redis入门到精通（九）--主从复制（3）##一、redis主从复制-常见问题（1）###1、伴随着redis系统的运行，master的数据量会越来越大，一旦master重启...
- redis - 主从复制（Redis主从复制时序图）
-
1引言在上一篇文章中，我们了解了Redis两种不同的持久化方式，Redis服务器通过持久化，把Redis内存中持久化到硬盘当中，当Redis宕机时，我们重启Redis服务器时，可以由RDB文件或AO...
- # Redis 入门到精通(九)-- 主从复制(2)
-
#Redis入门到精通（九）--主从复制（2）##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1）如果master数据量巨大，数据同步阶段应...
- Redis主从复制（redis主从复制主节点挂了）
-
介绍Redis有两种不同的持久化方式，Redis服务器通过持久化，把Redis内存中持久化到硬盘当中，当Redis宕机时，我们重启Redis服务器时，可以由RDB文件或AOF文件恢复内存中的数据。不过...
- 深入解析 Redis 集群的主从复制实现方式
-
在互联网大厂的后端开发领域，Redis作为一款高性能的内存数据库，被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制，更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...
- Redis主从架构详解（redis主从架构高可用如何实现）
-
Redis主从架构搭建Redis主节点配置创建主节点目录（/opt/redis-master），复制redis.conf到该目录下，redis.conf配置项修改#后台启动daemonizeyes...
- 抖音“四大包塘战神”:承包了全网的快乐
-
在抖音钓鱼垂类领域，"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者，以承包鱼塘为舞台，用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...
- ORACLE 11G RAC 安装-通过VM配置共享磁盘
-
简介：在自己的电脑上通过VM软件搭建Oracle11GRAC，通过修改VM的参数文件来实现磁盘共享！目标：搭建RAC环境实现：使用VMwareWorkstation8.0.0+ORACLE...
- Linux操作系统安全配置（linux系统安全配置包括）
-
一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...
- 关于Linux性能调优中网络I/O的一些笔记
-
写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅，可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...
- 从 Sonatype Nexus Repository Manager 迁移到 Artifactory
-
1.Nexus1.1下载下载链接：https://help.sonatype.com/repomanager3/product-information/download/download-archiv...
- Ubuntu20安装zabbix5.0企业监控系统亲测教程
-
前言示例主机：zabbix10.0.100.10，将安装在UbuntuServer上教程说明：因使用官方教程无法安装成功，所以本教程与官方教程有所不同安装前提：已安装UbuntuServer2...
- Linux内核设计与实现—进程管理（linux内核程序设计）
-
进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段，textsection)。通常进程还要包含其他资源，像打开的文件，挂起的信号，...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- secure-file-priv (67)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)