移动web——touch事件介绍

基本概念

1、在移动web端点击事件或者滑动屏幕、捏合等动作都是由touchstar、touchmove、touchend这三个事件组合在一起使用的

2、click事件在移动端会有0.2秒的延迟,下面是测试click在移动web端的延迟,最好在手机浏览器中测试

<script>window.onload = function () {var currentTime = 0;document.body.addEventListener('click', function (ev) {console.log(Date.now() - currentTime);})document.body.addEventListener('touchstart', function (ev) {currentTime = Date.now();});}
</script>

3、touchstar、touchmove、touchend这三个事件我们关注的是里面的touches属性,这是一个数组,里面有鼠标clientX与clinetY属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Title</title><style>html, body {height: 100%;background-color: pink;}</style>
</head>
<body>
<script>window.onload = function () {document.body.addEventListener('touchstart', function (ev) {console.log(ev);});document.body.addEventListener('touchmove', function (ev) {console.log(ev);});document.body.addEventListener('touchend', function (ev) {console.log(ev);})}
</script>
</body>
</html>

touchstart:touches中有长度为1的数组,touches[0]中clientX,clientY是有值的

touchmove:touches中有长度为1的数组,touches[0]中clientX,clientY是有值的,而且不断在变化

touchend:touches中有长度为0的数组,因为我们只是一个鼠标在点击,鼠标弹起的时候touches是不会存储值的

点击事件

既然click有延迟,那么我们就用touch的三个事件来代替click事件,只要满足下面几种情况,我们就能够说明这次动作是点击事件,而不是长按屏幕或者滑动屏幕

1、touchstart与touchend触发的事件大于250就证明这不是点击事件

2、touchmove事件在这次动作中被触发就证明这不是点击事件

3、下面是封装的一个toush事件模仿点击事件,需要注意的是回调函数的参数,它的实参是在函数中被传入的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Title</title><style>html, body {height: 100%;background-color: pink;}</style>
</head>
<body>
<script>var ele = document.querySelector('body');fox_tap(ele, function (e) {console.log('点击');console.log(e);});/*element:绑定的dom元素callback:回调函数*/function fox_tap(element, callback) {var statTime = 0;var isMove = false;var maxTime = 250;var event = null;element.addEventListener('touchstart', function (e) {statTime = Date.now();/*每次执行注册事件都要初始化此值,因为touchmove事件触发的时候会更改isMove的值,不更改,下次再进入touchtend事件会沿用上次touchmove修改过的isMove的值,这样就一直终端函数*/isMove = false;event = e;});element.addEventListener('touchmove', function (e) {isMove = true;});element.addEventListener('touchend', function (e) {if (isMove == true) {return;}if ((Date.now() - statTime) > maxTime) {return;}callback(event);});}
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/wuqiuxue/p/8242058.html

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

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

相关文章

如何计算一年总共有多少周_一年有几个周?怎么计算周数及闰年?

用这一年的天数除以7。因为一周有七天。分析过程如下&#xff1a;假设这一年是2018年&#xff0c;2018年是一个平年&#xff0c;因为2018/4504……2。平年的全年有365天&#xff0c;365752……1。由此可得2018年有52周多1天。扩展资料&#xff1a;闰年的计算方法&#xff1a;1、…

linux系统安装应用商店失败,在Deepin/UOS系统应用商店中安装KiCad失败的解决方法...

在Deepin/UOS系统应用商店中搜索并安装KiCad可能会提示安装失败&#xff0c;原因就是缺少必要的依赖包及KiCad的封装库文件。下面分享解决方法及附上Deepin系统安装KiCad5的方法。参考深度商店应用Inkscape、KiCad、MyPaint、中望CAD Linux预装版。解决方法在系统中通过终端执行…

在Oracle中利用SQL_TRACE跟踪SQL的执行

当你在执行一条SQL语句非常慢的时候,你是不是想问Oracle怎么执行这条语句的呢? Oracle提供的SQL_TRACE工具可以让你知道你执行的SQL究竟做了什么.执行的过程会被 输出到trace文件中. 下面用例子来跟踪一个SQL语句的执行情况: SQL> create table t as select rownum as id,o…

python可以测试java的代码吗_使用python做你自己的自动化测试--对Java代码做单元测试 (2)-导入第三方jar包裹...

使用Jython对Java做单元测试&#xff0c;当然&#xff0c;为了测试开发java代码。这涉及到引入第三包的问题&#xff0c;如何导入第三方的包? 您可以使用http://blog.csdn.net/powerccna/article/details/37739207 这里的实现的函数&#xff0c;扫描指定文件夹下的jar包&#…

linux ubantu扩展空间,ubuntu 扩展存储空间

今天解决了一个Ubuntu存储空间不足的问题。我在网上查了很多资料&#xff0c;都没有什么让我满意的方法。我是菜鸟级的用户&#xff0c;当然使用最菜的方法。以下是我的解决方案&#xff0c;供大家参考。方法步骤&#xff1a;第一步&#xff0c;在Ubuntu系统下&#xff0c;进入…

从使用到原理学习Java线程池

来源&#xff1a;SilenceDut http://www.codeceo.com/article/java-threadpool-learn.html线程池的技术背景 在面向对象编程中&#xff0c;创建和销毁对象是很费时间的&#xff0c;因为创建一个对象要获取内存资源或者其它更多资源。在Java中更是如此&#xff0c;虚拟机将试图跟…

docker 镜像修改的配置文件自动还原_PVE部署LXC运行docker

PVE部署Ubuntu20.04 LXC容器用于安装docker&#xff0c;LXC部署完成后可以进行如下操作。1、PVE打开LXC的嵌套&#xff0c;不然运行docker会报错 https://lala.im/6793.htmlLXC需要勾选“无特权的容器”在创建完成后需要到“选项-签名”下勾选“嵌套”&#xff0c;这个主要是可…

linux下c 链接mongodb,Linux下mongoDB下载与安装

百度网盘下载&#xff1a;https://pan.baidu.com/s/1r0JoOtoYzJEC_HOe-NALwg 提取码&#xff1a;rm12 此处提供的是mongodb-linux-x86_64-4.0.11.tgz 版本java开发工具下载地址及安装教程大全&#xff0c;点这里。更多深度技术文章&#xff0c;在这里。二、安装1、上传到linux系…

oracle12 pl/sql

pl/sql块介绍 介绍 块(block)是pl/sql的基本程序单元&#xff0c;编写pl/sql程序实际上就是编写pl/sql块&#xff0c;要完成相对简单的应用功能&#xff0c;可能只需要编写一个pl/sql块&#xff0c;但是如果想要实现复杂的功能&#xff0c;可能需要在一个pl/sql块中嵌套其它的p…

python判断字母数字_Python判断字符串是否为字母或者数字(浮点数)的多种方法

str为字符串s为字符串 str.isalnum() 所有字符都是数字或者字母 str.isalpha() 所有字符都是字母 str.isdigit() 所有字符都是数字 str.isspace() 所有字符都是空白字符、t、n、r 检查字符串是数字/浮点数方法 float部分 >> float(Nan) nan >> float(Nan) nan >…

linux通过spi和stm32通信,双STM32通过SPI进行通信

楼主谢谢(一直想用双stm32通信然而一直不太清楚)谢谢分享谢谢分享谢谢分享谢谢分享谢谢分享 谢谢分享谢谢分享谢谢分享 谢谢分享谢谢分享 谢谢分享谢谢分享谢谢分享谢谢分享 谢谢分享 谢 …

项目目录

一、rbac权限系统 二、博客园博客系统 三、会议室预定 四、调查问卷 五、crm资产管理转载于:https://www.cnblogs.com/52-qq/p/8244791.html

上海大学c语言作业答案,《上海大学C语言选择题》.doc

1.设有int i0; 下列语句的运行结果是()。while (i<6){ printf("%d",i);ii1;}A) 0123456B) 012345C) 01234D) 01232.设有int n60; 下列语句的运行结果是()。switch (n/10){case 6: printf(""); break;case 5: printf("#");default: printf(&qu…

注册登录页面代码用js判断是否填入信息_php实现登录功能

原文&#xff1a;https://blog.csdn.net/ccy1995414/article/details/80638685自然是从最简单的功能起步&#xff0c;我第一个任务选择了做一个登录操作&#xff0c;其实也没想象中那么简单。1.首先自然是连接和创建数据库这部分我写在model.php中$userNameroot;$passWord;$hos…

pagecontrol

PageControl组件位于组件板的Win32页中&#xff0c;该组件用于 实现窗体上多页面技术&#xff0c;每个页面上均能添加若干控件。程序运行时&#xff0c;单击页面标签就可以在多页之间切换。1&#xff0e;建立多页 用鼠标右键单击PageControl组件&#xff0c;在弹出式菜单中选择…

python网络通信框架_【python:flask-SocketIO】网络通信框架简单了解

Flask是一个用python开发的网络应用微框架。http://docs.jinkan.org/docs/flask/​docs.jinkan.org 而flask-SocketIO 为flask应用提供了一个客户端与服务器之间低延迟的双向通信。客户端应用可以用Javascript,C,Java,Swift或者其它任意的编程语言的socketio官方库的客户端去和…

如何交叉编译Python到ARM-Linux平台(转)

源&#xff1a; 如何交叉编译Python到ARM-Linux平台转载于:https://www.cnblogs.com/LittleTiger/p/8257720.html

Linux 4.15 rc7,Linux学习之十五(sed命令)-2017-4-23

sed命令&#xff1a;流编辑器1、sed基本用法&#xff1a;sed:Stream EDitor行编辑器(全屏编辑器&#xff1a;vi)2、sed&#xff1a;模式空间(默认不编辑原文件&#xff0c;仅对模式空间中的数据做处理&#xff0c;处理结束后&#xff0c;将模式空间打印至屏幕)3、sed [options…

CAS单点登陆的两个原理图

最近学习CAS单点登录&#xff0c;所以在网上找了两张比较清晰的原理图以供参考&#xff1a; 【CAS浏览器请求认证序列图】 其中&#xff1a;* ST&#xff1a;Service Ticket&#xff0c;用于客户端应用持有&#xff0c;每个ST对应一个用户在一个客户端上* TGT&#xff1a;Tick…

java api帮助文档_JAVA的Swagger界面丑、功能弱怎么破?

在做CRMEB-JAVA开源商城系统时&#xff0c;我们团队用到了uni-app&#xff0c;也是时下比较流行的移动端开发技术&#xff0c;这里边就牵扯到了前后端全部分离的问题&#xff0c;一般在使用java开发前后端分离项目的时候&#xff0c;都会用到Swagger&#xff0c;Swagger 是一个…