移动端touch与click

前段时间做项目中发现了点透现象，所以上网找了些资料，纪录一下。

touch事件

touch是针对触屏手机上的触摸事件。
其中包括：touchstart,touchmove,touchend,touchcancel

touchstart: 当手指触摸到屏幕会触发
touchmove: 当手指在屏幕上移动时，会触发
touchend: 当手指离开屏幕时，会触发

click

在手机WEB端，click会有 200~300 ms的延迟
在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click

点透

点透现象出现的场景

当A/B两个层上下z轴重叠，上层的A点击后消失或移开，并且B元素本身有默认click事件或绑定了click事件。在这种情况下，点击A/B重叠的部分，就会出现点透的现象。

解决方案

引入fastclick.js

阻止默认事件

event.preventDefault();

延迟click事件

setTimeout(function(){//......
},320);

移动端touch与click相关推荐

移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
移动端触屏click点击事件延迟问题，以及tap的解决方案
在移动端触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...
vue 多个click_vue中touch和click共存的解决方式
在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove. ...
移动端 touch 滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
vue中如何解决touch和click共存的问题
在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove. ...
demo h5 touch 移动_H5案例分享：移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向方法一当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
Vue 之移动端 better-scroll 下 click 事件失效问题（PC端却正常click点击）
Vue 之移动端 better-scroll 下 click 事件失效问题(PC端却正常click点击) 目录 Vue 之移动端 better-scroll 下 click 事件失效问题(PC端却 ...
搞定移动端一(移动端 touch 事件，TouchEvent 对象)
移动端事件 1.目标掌握移动端 touch 事件使用掌握 touch 事件和 mouse 事件的区别掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...
移动端 touch事件过渡事件动画事件
移动端首先要书写meta标签 <meta type="viewport" content="width=device-width,user-scalable=no, ...

移动端touch与click

touch事件

click

点透

点透现象出现的场景

解决方案

引入fastclick.js

阻止默认事件

延迟click事件

移动端touch与click相关推荐

最新文章

热门文章