移动端的点透事件

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

如下图所示:当我们给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触发时,才实现跳转。

原文地址:https://www.cnblogs.com/yinhaiying/p/10796876.html

时间: 2024-10-29 13:10:36

移动端的点透事件的相关文章

移动端与PC端的触屏事件

由于移动端是触摸事件,所以要用到H5的属性touchstart/touchmove/touched,但是PC端只支持鼠标事件,所以此时可以这样转换 var touchEvents = { touchstart: "touchstart", touchmove: "touchmove", touchend: "touchend", /** * @desc:判断是否pc设备,若是pc,需要更改touch事件为鼠标事件,否则默认触摸事件 */ init

H5案例分享:移动端滑屏 touch事件

移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发.touchmove: //在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止滚动.touchend: //从屏幕上移开

移动端的touch click事件的理解+点透

移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart -> touchmove -> touchend -> touchcancel . 其中touchcancel一般情况下不会触发,也不是这里讨论的焦点: 这里会结合click对上面的事件进行讨论, touch发生在click之前 先上段代码,直观感受一下 <!DOCTYPE html&g

移动端“点透事件”

参考链接: http://www.uedsc.com/through-the-click-point-in-the-development-of-web.html 刚才举例说明了什么是点透,其实点透的出现场景可以总结如下: A/B两个层上下z轴重叠. 上层的A点击后消失或移开.(这一点很重要) B元素本身有默认click事件(如a标签) 或 B绑定了click事件.

移动端开发用touch事件还是click事件

前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着也是不错的. 首先,我先说一下touch事件在开发中存在的两个问题: 1.touch事件在某些场景下存在点击穿透的问题. 2.touchstart事件时触摸屏幕就会触发,touchend事件是手指离开屏幕就会触发,而有时候,我们仅仅是只想滑动屏幕,却会触发这两个事件. 1问题的原因:移动端事件触发的

Unity NGUI实现移动端输入法取认事件响应

NGUI已经实现了事件的监听功能,看下图:On Return Key(选择Snbmit) ,可以直接注册监听事件. 实现如下: 1.搭建一个简单场景 2.新建一个脚本InputTest.cs 挂载在Input物体下,并拖拽赋值Txt_content, input using UnityEngine; //笔者通过集成InputField,在update中监听软件盘的状态捕获到回车事件 public class InputTest : MonoBehaviour {     public UILa

ios移动端浏览器点击事件失效的解决方案

点击事件失效的原因可能是因为,你用了事件代理了, 比如这样 $(document).on("click",".fd",function(){ }) 这段代码在安卓机上是没有问题的,但是iso的自带浏览器和微信浏览器和其他浏览器都会失效,原因是ios规定,事件代理的元素只能是button元素其他一律不生效 想要解决这个问题,也很简单 1. $(document).on("click","button",function(){ }

移动端关于拖拽事件

探究一下移动端的拖拽!因为html5出来了一个drag么!然后就兴致勃勃的去试了试,结果发现drag在pc端使用好使,但是在移动端不好用,然后在网上查了一下,有关于各个浏览器对drag的支持状况,在此附上链接一枚(想具体了解可以看看): http://caniuse.com/#search=Drag 没办法就就开始想别的办法,结果发现好多人用touch事件,所以便试了试,效果还算不错,自己写的就不上代码了,就把参考的一片文章附上供大家参考参考: -------------------------

移动端触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个