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

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

如下图所示:当我们给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,一经查实,立即删除!

相关文章

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

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

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实现过动画的同学都应该了解一点,简单…

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四、简…

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

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

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

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

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

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

错误:不能继续进行下一步操作 openfire 设置._如何为MacBook或Mac电脑恢复出厂设置...

mac电脑经过长时间的使用后会变得卡顿,或者因为部分操作方式改变以至于给我们在使用过程中造成障碍,此时我们可以进行恢复出厂设置,以此来解决部分问题。那么该如何为MacBook或Mac电脑恢复出厂设置呢?下面跟随小编来一起学习一下吧…

mac显示网速_Mac网络流量监控工具——NetWorker pro

NetWorker pro for Mac是Mac系统上一款轻量级的网速实时监测软件,可以让用户在菜单栏上显示当前的网络上传下载速度,可以在速度和流量两种模式之间切换,也可以选择不同的网络模式来进行监测。此外,networker mac还提供有关当前活动…

matlab gui学习手记_MATLAB论坛不可错过的30例GUI源代码

​过去的两年中,我经常会在微信公众号和知乎上分享,平时如何通过MATLAB制作GUI,来让自己的工作和生活更加便捷与高效。在分享的同时,有不少朋友会给我留言提问关于MATLAB GUI的问题。而其中的许多问题,其实都是能够在M…

线性回归csv数据集_用mxnet的gluon线性回归训练只有两个特征的数据集

前言自从上次试着用最基础的线性回归训练一个有80个特征的数据集,梯度爆炸之后,今天拿一个简单到不能再简单的数据集试试能不能成功收敛。途中我们又会遇到什么问题?数据集来自吴恩达机器学习课程第二周的课后练习。原本是txt文件&#xff0c…

java中include标签的用法_原 ng-include用法分析以及多标签页面的简单实现方式

在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容。如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好…

禅道项目管理_禅道 11.6.1 版本发布,完善细节,修复 Bug

禅道项目管理软件集产品管理、项目管理、质量管理、文档管理、组织管理和事务管理于一体,是一款功能完备的项目管理软件,完美地覆盖了项目管理的核心流程。禅道官网:www.zentao.net。大家好,禅道项目管理软件11.6.1发布&#xff0…

mendeley引用参考文献不显示_免费文献管理器Mendeley

June 2020有机合成化学文献检索今天小编给大家分享一款免费又好用的文献管理器——Mendeley,另外晶体cif文件下载—Materialsproject和COD数据库可在菜单栏的文献检索[文献管理/资源]中查看Mendeley是什么Mendeley是一款免费的跨平台文献管理软件,同时也…

停车场管理系统代码_jsp19109商场商铺停车场服务系统-SSM-Mysql

jsp19109商场商铺停车场服务系统-SSM-Mysql该设计有演示视频    100%能运行买重包换  保密发送  一校一份编号:jsp19109语言数据库:jspMysql论文字数:12032字摘 要随着社会的发展,社会的方方面面都在利用信息化时代的优势。计…

qregexp限制数字范围_数字系统实现电压电流控制的必经之路数模转换器

《芯势力》系列接上一篇文章,我们了解到了模数转换器,本文将带你了解数模转换器。看名字就能知道,如果模数转换器实现了模拟信号到数字信号的转换,那么,数模转换器就是模数转换器的逆过程,即把数字信号转换…

js方式调用php_js如何调用php函数

js调用php函数的方法:jQuery.ajax({type: "POST",url: your_functions_address.php,dataType: json,data: {functionname: add, arguments: [1, 2]},success: function (obj, textstatus) {if( !(error in obj) ) {yourVariable obj.result;}else {conso…

最大子序列求和_算法——求最大子段和

一、问题描述给定由n个整数组成的序列(a_1,a_2,…,a_n),最大子段和问题要求该序列形如 的最大值(1≤i≤j≤n),当序列中所有整数均为负整数时,其最大子段和为0。例如,序列(-20, 11, -4, 13, -5, -2)的最大子段和为: 注意…

seo黑帽劫持用的php,黑帽seo 论坛:黑帽seo防止网站被k的js劫持跳转代码

由于目前百度搜索百度搜索引擎对于js代码还没有办法完全辨别,因此也就出现了运用js代码跳转的黑帽优化提升手法。现如今在网络上有关js跳转代码不计其数,但是作为黑帽优化提升的seo手法之一,如何确保有效降低跳转的网址被k危害性,…

oracle 同义词_【干货7】Oracle知识关键代码摘要

(如果我分享的干货内容对你有帮助,可以通过赞或者评论的方式告诉我,我会持续分享;或者留言你想要的IT方面的支持,我将分享大家感兴趣的IT类技术干货;如果没有收到大家的反馈,10天后我将停止技术…