移动web touch事件
参考:http://www.cnblogs.com/dojo-lzz/p/5452575.html
wap中的原生touch 事件,touchstart、touchmove、touchend、touchcancel,这些事件仅仅在移动端才会被触发,在pc端无效。而且在web中也没有PC的鼠标事件。两个端都存在click事件,但在web下会存在以下两个问题:
移动端click事件存在300ms延迟
因为网页中存在一种双击放大的操作,两次点击之间不超过300ms则认为是双击,所以浏览器为了区别是双击还是单击,单击的效果会有300ms延迟。了有更好的用户体验,需要自己利用以上的4个touch事件封装一些更快的点击事件(一般由touchstart以及touchend组成)其实也可以使用第三方库如zepto,使用里面封装的tab事件。或者使用插件 fastclick。
穿透现象
遮罩上绑定一个touchstart事件,触发就使遮罩消失,然后300ms后触碰点下的元素的click事件会被触发。原因也还是因为以上的300ms延迟。点击300ms发生后,浏览器寻找触碰点的顶层元素,然后触发一次click事件,大致过程如下:
e = document.elementFromPoint(x, y);
e.dispatchEvent('click');
以下代码会出现穿透现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<style>
.splash{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(99,99,99,0.2);
}
</style>
<div class="splash"></div>
<button onclick="console.log('click')">这是按钮</button>
<script>
let splash = document.querySelector('.splash');
splash.addEventListener('touchend',()=>{
splash.style.display = "none";
})
</script>
</body>
</html>
为了解决以上两个问题,需要自己封装web的点击事件,封装的思路如下:
- touchstart和touchend组成一次点击事件,按下和抬起之间所移动的距离不得超过4px
- 在捕获阶段,对click事件进行事件流拦截
移动web touch事件的更多相关文章
- 移动web——touch事件应用
基本概况 1.touch事件在移动端被用来代替click事件,因为click事件的触发会延迟影响了用户体验 2.touch事件还可以与translate构成吸附效果 3.现行有一种排版方式是左边宽度是 ...
- 移动web——touch事件介绍
基本概念 1.在移动web端点击事件或者滑动屏幕.捏合等动作都是由touchstar.touchmove.touchend这三个事件组合在一起使用的 2.click事件在移动端会有0.2秒的延迟,下面 ...
- Touch事件在移动端web开发中的详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘 ...
- 移动端Web界面滚动touch事件
解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y ...
- 从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- 移动web开发之touch事件
前面的话 iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件.因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互性网页时,常规的鼠标和键盘事件根本不够用.随着An ...
- 移动端开发概览【webview和touch事件】
作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...
- mobile touch事件
touch.js 众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的cl ...
随机推荐
- keepalived 原理、安装与使用
1. keepalived工作原理 keepalived是集群管理中保证集群高可用的一个服务软件,其功能类似于heartbeat,用来防止单点故障. keepalived是以VRRP协议为实现基础的, ...
- SVG动画 -- 描边动画
代码说明:纯CSS实现,无JS <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- IT兄弟连 JavaWeb教程 Servlet表单数据
很多情况下,需要传递一些信息,从浏览器到Web服务器,最终到后台程序.浏览器使用两种方法可将这些信息传递到Web服务器,分别为GET方法和POST方法. 1.GET方法 GET 方法向页面请求发送已编 ...
- Django学习:模板语法
一.什么是模板? 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法分类 一.模板语法之变量:语法为 {{ }}: 在 Django 模板中遍历复杂数据结构的关键 ...
- scrapy 用法总结
待更新: 建立python开发虚拟环境 virtualenv mkvirtualenv --python=the-path-to-the-python-you-want-to use 安装: 使用p ...
- 3分钟入门微信小程序直播
效果预览 开发环境搭建 安装微信开发者工具 相对于以前微信以前的产品来说.小程序在发布之初就面向开发者开放微信开发者工具.使开发者更加方便的开发和调试小程序.我们从官网下载安装.官网下载地址.现在 ...
- docker监控系统
第一:docker监控系统之命令行式监控 第二:docker监控系统之cadvisor 第三:docker监控系统之 第四:docker监控系统之
- 1-2JDK的安装和环境变量设置
JDK的下载和安装 可以去oracle官网里面下载JDK:http://www.oracle.com 英文不好的同学可以通过下面这个百度网盘的链接进行下载:http://pan.baidu.com/s ...
- 2019/05/11 JAVA虚拟机原理堆、栈、方法区概念区别
Java堆 堆内存用于存放由new创建的对象和数组.在堆中分配的内存,由java虚拟机自动垃圾回收器来管理.在堆中产生了一个数组或者对象后,还可以在栈中定义一个特殊的变量,这个变量的取值等于数组或者对 ...
- Elasticsearch (1) - 索引库 文档 分词
创建索引库 ES的索引库是一个逻辑概念,它包括了分词列表及文档列表,同一个索引库中存储了相同类型的文档.它就相当于MySQL中的表,或相当于Mongodb中的集合. 关于索引这个语: 索引(名词):E ...