百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

前端开发中什么是移动端点透事件?

bigegpt 2024-10-12 06:28 3 浏览

点透事件：是指两个元素其中一个元素具有默认的点击事件，当我们让不具有点击事件的元素隐藏起来，会触发另一个元素的点击事件，这种行为被称之为点透事件。

如下图所示：当我们给div元素添加touchstart事件让div元素隐藏起来，则a标签会发生跳转。相当于我们"点透"了div元素，从而触发了a标签的默认跳转行为，这就是所谓的点透事件。

分析这种点透事件的原因，我们需要了解移动端和PC端的事件的不同之处：

1、PC端所有的事件都能够在移动端被触发.也就是说索然移动端目前主要是touch事件，但是其他的事件也会被触发，只是没有相对应的事件处理函数，比如touchstart就触发了click事件。

2、PC端事件在移动端触发有300毫秒延迟，这是因为PC端的事件太多，可能同一个行为能够触发非常多的事件，浏览器需要通过这300毫秒内的行为，判断究竟触发的是哪个事件。比如点击一下，触发的事件可能有点击事件，鼠标按下事件，双击事件等。浏览器需要根据就下来你的操作来判断究竟属于哪个事件，如果接下来你不进行操作那么就是点击事件，如果你连续点击了，那么可能是双击事件。

3、移动端事件没有300毫秒延迟，因为移动端事件简单，只有touch几种事件，不存在相同的事件。

根据上面的事件机制我们来分析上面的代码：

首先我们点击div以后，触发了多个事件，包括click,doubleclick,mousedown,touchstart等事件，其中只有touchstart绑定了事件处理函数，其中touchstart是移动端事件没有延迟，因此div层马上消失，但是click事件有300ms的延迟，在这个地方会执行click的事件处理函数，由于a标签具有click的默认事件，因此会触发a标签的跳转，这就是所谓的'点透'。其实只不过是PC端事件在移动端有300ms延迟造成的。

点透事件的解决办法：取消元素的默认点击事件

点透事件造成的问题是本来不应该跳转的元素发生了跳转，因此我们需要阻止掉元素的默认跳转行为。但是如果我们阻止了元素的默认跳转行为，在其他地方需要进行跳转时就无法正常跳转了，因此我们需要设置新的跳转行为。

上面我们通过使用移动端的阻止默认事件的方法，阻止了所有的默认行为，也包括默认跳转。但是a标签在其他情况下，需要正常跳转，这时候我们需要重新定义a标签的跳转。通过出发touchend事件时，将其跳转到对应的href。但是通过touchend事件触发的点击事件可能存在问题，因为还有可能touchmove也会触发a标签的点击事件(误触)。

因此我们需要判断究竟是touchend触发了点击事件还是touchmove触发了点击事件。只有在touchend触发时，才实现跳转。

相关推荐

Go语言泛型-泛型约束与实践（go1.7泛型）

来源：械说在Go语言中，Go泛型-泛型约束与实践部分主要探讨如何定义和使用泛型约束（Constraints），以及如何在实际开发中利用泛型进行更灵活的编程。以下是详细内容：一、什么是泛型约束？**泛型...

golang总结（golang实战教程）

基础部分Go语言有哪些优势？1简单易学：语法简洁，减少了代码的冗余。高效并发：内置强大的goroutine和channel，使并发编程更加高效且易于管理。内存管理：拥有自动垃圾回收机制，减少内...

Go 官宣:新版 Protobuf API（go pro版本）

原文作者：JoeTsai,DamienNeil和HerbieOng原文链接：https://blog.golang.org/a-new-go-api-for-protocol-buffer...

Golang开发的一些注意事项(一)（golang入门项目）

1.channel关闭后读的问题当channel关闭之后再去读取它，虽然不会引发panic，但会直接得到零值，而且ok的值为false。packagemainimport"...

golang 托盘菜单应用及打开系统默认浏览器

之前看到一个应用，用go语言编写，说是某某程序的windows图形化客户端，体验一下发现只是一个托盘，然后托盘菜单的控制面板功能直接打开本地浏览器访问程序启动的webserver网页完成gui相关功...

golang标准库每日一库之 io/ioutil

一、核心函数概览函数作用描述替代方案（Go1.16+）ioutil.ReadFile(filename)一次性读取整个文件内容（返回[]byte）os.ReadFileioutil.WriteFi...

文件类型更改器——GoLang 中的 CLI 工具

我是如何为一项琐碎的工作任务创建一个简单的工具的，你也可以上周我开始玩GoLang，它是一种由Google制作的类C编译语言，非常轻量和快速，事实上它经常在Techempower的基准测...

Go (Golang) 中的 Channels 简介（golang channel长度和容量）

这篇文章重点介绍Channels(通道)在Go中的工作方式，以及如何在代码中使用它们。在Go中，Channels是一种编程结构，它允许我们在代码的不同部分之间移动数据，通常来自不同的goro...

Golang引入泛型:Go将Interface「」替换为“Any”

现在Go将拥有泛型：Go将Interface{}替换为“Any”，这是一个类型别名：typeany=interface{}这会引入了泛型作好准备，实际上，带有泛型的Go1.18Beta...

一文带你看懂Golang最新特性（golang2.0特性）

作者：腾讯PCG代码委员会经过十余年的迭代，Go语言逐渐成为云计算时代主流的编程语言。下到云计算基础设施，上到微服务，越来越多的流行产品使用Go语言编写。可见其影响力已经非常强大。一、Go语言发展历史...

Go 每日一库之 java 转 go 遇到 Apollo?让 agollo 来平滑迁移

以下文章来源于GoOfficialBlog，作者GoOfficialBlogIntroductionagollo是Apollo的Golang客户端Apollo（阿波罗）是携程框架部门研...

Golang使用grpc详解（golang gcc）

gRPC是Google开源的一种高性能、跨语言的远程过程调用（RPC）框架，它使用ProtocolBuffers作为序列化工具，支持多种编程语言，如C++,Java,Python,Go等。gR...

Etcd服务注册与发现封装实现--golang

服务注册register.gopackageregisterimport("fmt""time"etcd3"github.com/cor...

Golang:将日志以Json格式输出到Kafka

在上一篇文章中我实现了一个支持Debug、Info、Error等多个级别的日志库，并将日志写到了磁盘文件中，代码比较简单，适合练手。有兴趣的可以通过这个链接前往：https://github.com/...

如何从 PHP 过渡到 Golang?（php转golang）

我是PHP开发者，转Go两个月了吧，记录一下使用Golang怎么一步步开发新项目。本着有坑填坑，有错改错的宗旨，从零开始，开始学习。因为我司没有专门的Golang大牛，所以我也只能一步步自己去...

一周热门
最近发表
标签列表