移动端 关闭浏览器事件_前端开发中什么是移动端点透事件?

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

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

6e656790326b12a38644ab459f2f9fa3.png

分析这种点透事件的原因,我们需要了解移动端和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延迟造成的。

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

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

b8e46fa6df434a0df20fd7db20b73d9d.png

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

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

c5c45355843eae9218d8a0c8d7001749.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245086.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java web 线程数_Java Web应用调优线程池

最简单的单线程我们先从基础开始。无论使用哪种应用服务器或者框架(如Tomcat、Jetty等),他们都有类似的基础实现。Web服务的基础是套接字(socket),套接字负责监听端口,等待TCP连接,并接受TCP连接。一旦TCP连接被接受,即…

清除浏览器缓存之后为什么还是显示旧的html页面_Web缓存控制策略详解

管理Web缓存的最常用和最有效的方法之一是通过Cache-Control HTTP标头,由于此标头适用于Web页面的缓存,这意味着我们页面上的所有内容都可以具有非常精细化的缓存策略。通过各种自定义策略,我们控制的策略就可以变得非常复杂和强大。Cache-Co…

js二维数组_Javascript数组

数组的概念:引用类型的对象。本质:内存中存储多个数据的空间,再取个名字。数据结构:数据结构不同,擅长的操作不同。数组特点:便于数据的查找与维护。数组的创建:方法1:var 数组名【元…

java jtextfield 事件_JAVA JTextField事件处理

初学JAVA,笔记:package windows;import javax.swing.*;import java.awt.*;import java.awt.event.*;class WindowFlow extends JFrame implements ActionListener{private static final long serialVersionUID 1L;JTextField text1,text2;WindowFlow(St…

js封装函数_JavaScript基础-如何封装函数来改变元素的位置

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!大家好!我是/小郑搞码事/的小郑今天给大家分享JavaScript的基础知识-改变元素的位置。没错,用JS实现过动画的同学都应该了解一点,简单…

python查找指定字符所在行号_python查找字符串中某个字符

本文收集整理关于python查找字符串中某个字符的相关议题,使用内容导航快速到达。内容导航:Q1:Python里统计一个字符串中另一个字符串的个数答案为3(用正则):1234>>>importre>>>sabababab>>>len(re.fin…

java jai create 方法_使用JAI扩展Java Image的功能

Java Image功能一直都在增强,但是向磁盘写一个图像文件或者返回一个PNG或JPEG依然比较难实现。但是我们可以使用Java Advanced Imaging(JAI)API来解决这个问题。JAI可以从SUN的Java站点下载,它包含在JDK 1.4的javax.imageio包中。要安装JAI,你…

python实现rm_python winrm模块使用

使用session方法###import winrmswinrm.Session(http://10.10.60.14:5985/wsman,auth(administrator,password))rs.run_ps(dir)rs.run_cmd(cd /d d: & test.bat)print r.std_outprint r.std_err使用Protocol方法###import winrmconn winrm.Protocol(endpointhttp://10.10…

java程序设计与实践教程 王薇 doc_Java程序设计与实践教程 王薇主编 答案

Java程序设计与实践教程 王薇 主编 董迎红 副主编 课后习题 答案第1章 JAVA简介一、判断题1.√ 2.√ 3. 4. 5. 6.√ 7.√ 8.√ 9. 10.二、填空题1.Application Applet 2. 类(字节码文件、目标文件) .class3.对象 4. 主 5. J2SE J2EE J2ME三、选择题1.B 2. D 3.B 4.B 5. A四、简…

树莓派python开发工具哪个好_Thonny——树莓派上Python的最新IDE

Thonny是最新的Raspbian系统中直接自带的Python IDE,支持Python3.6,更新到最新的Raspbian之后无需安装其他,就能打开使用。在Menu>Programming中就能找到这个IDE打开之后可以看到主要是两个区域,包括一个代码编辑区和一个shell…

java中常量final的用法_详解Java中final的用法

本文主要介绍了Java中final的使用方法,final是java的关键字,本文就详细说明一下它的使用方法,需要的朋友可以参考下概念final 具有“不可改变的”的含义,可以修饰 非抽象类、非抽象成员方法和变量。用 final 修饰的类不能被继承,没…

python弹球游戏绑定鼠标事件_用python和pygame游戏编程入门-弹球[鼠标控制]

本节我们再将鼠标的事件引入到这个动画中,要做什么呢?就是在动画中,如果按下鼠标左键,小球会停止移动,如果松开左键,小球会移动到鼠标的位置,然后继续刚才的运动;如果按下鼠标左键不…

maya藤蔓插件_Maya特效制作之植物生长动画制作教程(二)之多条藤蔓动画制作...

四、制作多条蔓藤植物下面我们要让很多植物在这个“崖壁”上生长出来,也就是要重复很多次前面的工作,当然可以这样一步一步地做,在“崖壁”面片上手动画很多的线,但下面尝试一种新的方法来制作,让粒子在“崖壁”面片Pl…

python自动发邮件运行正常就是收不到邮件是为什么_python stmp module 163邮箱发送邮件不成功...

开发环境:系统:Ubuntu 16.04 LTS版本:python 3.5.2邮箱服务器:stmp.126.com注意:1.不可正文群发带图,不然会被stmp.126.com认定为垃圾邮件,发不出去 - -!!! 也就是说该代码群发的话,只能用plain纯文本模式.2.由于我的邮箱服务器是126的,所以建议也使用126邮箱测试,测试的前提是…

mysql数据库导入导出_MySQL数据库导入导出详解

MySQL数据库的导入,有两种方法:1) 先导出数据库SQL脚本,再导入;2) 直接拷贝数据库目录和文件。在不同操作系统或MySQL版本情况1. 概述MySQL数据库的导入,有两种方法:1) 先导出数据库SQL脚本,再导…

python列表切片后得到剩余列表_python列表切片和嵌套列表取值操作详解

python列表切片和嵌套列表取值操作详解给出列表切片的格式:[开头元素::步长] # 输出直到最后一个元素,(最后一个冒号和步长可以省略,下同)[开头元素:结尾元素(不含):步长]# 其中,-1表示list最后一个元素首先来看最简单的单一列表:…

python 装饰器有哪些_Python装饰器有哪些常见用途?

RSabet..123我使用装饰器主要用于计时目的def time_dec(func):def wrapper(*arg):t time.clock()res func(*arg)print func.func_name, time.clock()-treturn resreturn wrappertime_decdef myFunction(n):...好例子!不知道它做了什么.解释你在那里做什么,以及装饰者如何解决…

代码统计工具有哪几种_跟我学“Linux”小程序Web版开发(四):引入统计及Crash收集...

在完成了产品的基础开发以后,接下来需要进行一些周边的工作,这些周边工具将会帮助下一步优化产品。在完成了产品的基础开发以后,接下来需要进行一些周边的工作,这些周边工具将会帮助下一步优化产品。为什么要加应用统计和 Crash 收…

mmseg java_MMSeg中文分词算法

Java中有一些开源的分词项目,比如:IK、Paoding、MMSEG4J等等。这里主要说的是MMSEG4J中使用的MMSeg算法。它的原文介绍在:http://technology.chtsai.org/mmseg/,是用英文书写的,这是只是它的一个中文笔记。为什么中文要…

python查看文档的软件_Python __doc__属性:查看文档

前面介绍了使用 help() 函数来查看程序单元的帮助信息。比如导入 string 模块之后,即可使用 help() 函数来查看指定程序单元的帮助信息。例如,在交互式解释器中输入如下命令来查看 string 模块下 capwords() 函数的作用:>>> help(st…