移动端触摸(touch)事件

目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。

但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。

项目需求,需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性, 所以想到HTML5中的drag事件, 发现移动端 android & IOS 并不支持 drag 事件。现在让我们来介绍一下移动端的常用事件吧

一、click点击事件

单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟。

二、touch触摸事件

触摸事件,有touchstart touchmove touchend touchcancel 四种之分,常用的有:

touchstart:手指触摸到屏幕会触发

touchmove:当手指在屏幕上移动时,会触发

touchend:当手指离开屏幕时,会触发

touchcancel:可由系统进行的触发(不常用事件),比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件。

2.1事件列表

上面的三个触摸事件每个事件都有以下列表

    changedTouches:保存了所有引发事件的手指信息

    targetTouches:保存了当前对象上所有触摸点的列表;

    touches:保存了当前所有触碰屏幕的手指信息

 

2.1.1事件属性(只读属性)

每个事件有列表,每个事件列表还有以下属性

    pageX    //相对于页面的 X 坐标,与 clientX 不同的是,他包括左边滚动的距离,如果有的话。
    pageY    //相对于页面的 Y 坐标,与 clientY 不同的是,他包括上边滚动的距离,如果有的话。
    clientX  //相对于视区的 X 坐标
    clientY  //相对于视区的 Y 坐标
    screenX  //相对于屏幕的 X 坐标
    screenY  //相对于屏幕的 Y 坐标
 
    identifier  // 当前触摸点的惟一编号
    target    //手指所触摸的 DOM 元素
    Touch.radiusX    //能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径。这个值的单位和 screenX 相同。只读属性。     
    Touch.radiusY    //能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径。这个值的单位和 screenY 相同。只读属性。     
    Touch.rotationAngle   //它是这样一个角度值:由radiusX 和 radiusY描述的正方向的椭圆,需要通过顺时针旋转这个角度值,才能最精确地覆盖住用户和触摸平面的接触面。只读属性。     
    Touch.force   //手指挤压触摸平面的压力大小,从0.0(没有压力)到1.0(最大压力)的浮点数。只读属性。

比如:想获取手指拖动滑动的坐标位置,直接使用event.clientX是不起作用的,要使用event.changedTouches[0].clientX才好,

如果是jquery的event对象,使用event.originalEvent.changedTouches[0].clientX。

调用事件方法:
(1)jquery方法:$(document).bind("touchend", function(e){});
(2)javascript方法:document.addEventListener("touchend",function(e){});

三、tap类触碰事件

触碰事件,我目前还不知道它和touch的区别,一般用于代替click事件,有tap longTap singleTap doubleTap四种之分,有时会用tap代替click事件

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap: 手指碰一下屏幕会触发

doubleTap: 手指双击屏幕会触发

四、swipe滑动事件

滑动事件,有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分

swipe:手指在屏幕上滑动时会触发

swipeLeft:手指在屏幕上向左滑动时会触发

swipeRight:手指在屏幕上向右滑动时会触发

swipeUp:手指在屏幕上向上滑动时会触发

swipeDown:手指在屏幕上向下滑动时会触发

 五、gesture手势事件

当两个手指触摸屏幕时就会产生手势,手势通常会改变显示项的大小,或者旋转显示项。有三个手势事件,分别如下。

  • gesturestart:当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。
  • gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
  • gestureend:当任何一个手指从屏幕上面移开时触发。

 

转载于:https://www.cnblogs.com/jing-tian/p/11049705.html

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

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

相关文章

numcpp速度对比_PHP和C++性能对比.pdf

PHP 与C性能比较本文博客链接:http://keping.me/php_vs_cpp/PHP 是速度很快的脚本语言,但是用了框架以后好像感觉挺慢的。于是猜测会不会PHP 本身也不是很快。如果不是很快,能否采用 PHP 调用本地动态链接库的形式来提升速度。于是有了下面的…

jndi ldap_什么是JNDI,SPI,CCI,LDAP和JCA?

jndi ldapJNDI代表Java命名和目录接口 。 它是用于提供对目录服务(即,服务映射名称(字符串)与对象,对远程对象或简单数据的引用)访问的API。 这就是所谓的 约束力 。 绑定集称为上下文 。 应用程序使用JND…

PyOpenCV 基本操作

目录 1. 图片加载、显示和保存 2. 图像显示窗口创建与销毁 3. 图片宽、高、通道数获取 4. 图像像素数目和图像数据类型的获取 5. 生成指定大小的空图像, 生成指定大小的空图像 6. 访问和操作图像像素 7. 图像三通道分离和合并 8. 抓取摄像头 1. 图片加载、显示和保存 …

python中用于标识字符串的定界符_Python 基本数据类型

######################基本数据类型######################数字类型整数 int整数是用来表示整数数值,即没有小数部分的数值,包括正整数 负整数和0整数类型包括十进制整数 八进制整数 十六进制整数和二进制整数例如: 0 , 100 , 65205浮点数 float浮点数由整数部分和小数部分组成…

适用于Java开发人员的Elasticsearch:命令行中的Elasticsearch

本文是我们学院课程的一部分,该课程的标题为Java开发人员的Elasticsearch教程 。 在本课程中,我们提供了一系列教程,以便您可以开发自己的基于Elasticsearch的应用程序。 我们涵盖了从安装和操作到Java API集成和报告的广泛主题。 通过我们简…

系统间账号认证系统同步方案

系统间账号认证系统同步方案 基础原理:(基于Web) 浏览器在个请求传递cookie到服务器,服务器对cookie增删改查的操作, 写入JSessionId实现与服务器Session的绑定,保持会话 单机情况下:一个域名,对应一个cookie&#xff…

Pytorch 加载预训练模型参数时出现size mismatch错误

目录 1 不妨先研究一下’ resnet18-5c106cde.pth’里面存了什么东西以及它的数据类型 (1_1)’ resnet18-5c106cde.pth’的数据类型

python元类单例_python面向对象和元类的理解

1 python类对象与实例对象python中一切皆对象(广义上的对象),类也不例外,我们可以称类为类对象。python中内建函数type()可以返回对象的类型,例如type(int)会得到返回值,而int为类型工厂函数,是内置的类对象。如果对自…

Java命令行界面(第7部分):JCommander

这是我系列的第七篇文章,简要介绍了用于处理Java命令行参数的各种库。 这篇文章回到了基于注释的库的覆盖范围,该库似乎是在Java中可用于处理命令行参数的众多可用库中知名度最高和最受欢迎的库之一: JCommander 。 JCommander的网页上指出&…

Pytorch 加载部分预训练模型并冻结某些层

目录 1 pytorch的版本&#xff1a; 2 数据下载地址&#xff1a; 3 原始版本代码下载&#xff1a; 4 直接上代码&#xff1a; 1 pytorch的版本&#xff1a; 2 数据下载地址&#xff1a; <https://download.pytorch.org/tutorial/hymenoptera_data.zip> 3 原始…

INT类型知多少

前言&#xff1a; 整型是MySQL中最常用的字段类型之一&#xff0c;通常用于存储整数&#xff0c;其中int是整型中最常用的&#xff0c;对于int类型你是否真正了解呢&#xff1f;本文会带你熟悉int类型相关知识&#xff0c;也会介绍其他整型字段的使用。 1.整型分类及存储范围 整…

altera fpga 型号说明_A/X家FPGA架构及资源评估

欢迎FPGA工程师加入官方微信技术群点击蓝字关注我们FPGA之家-中国最好最大的FPGA纯工程师社群评估对比xilinx以及altera两家FPGA芯片逻辑资源。首先要说明&#xff0c;现今FPGA除了常规逻辑资源&#xff0c;还具有很多其他片内资源比如块RAM、DSP单元、高速串行收发器、PLL、AD…

guava api_使用Google Guava的订购API

guava api我们在Google的Guava库中玩的更多&#xff0c;这真是一个了不起的库&#xff01; 我们用于它的最新内容是为我们的域对象整理比较器。 这是如何做。 使用Apache Isis的JDO Objectstore &#xff0c;使您的类实现java.lang.Comparable &#xff0c;并对集合使用SortedS…

Pytorch 加载和保存模型

目录 保存和加载模型 1. 什么是状态字典&#xff1a;state_dict? 2.保存和加载推理模型 2.1 保存/加载 state_dict &#xff08;推荐使用&#xff09; 2.2 保存/加载完整模型 3. 保存和加载 Checkpoint 用于推理/继续训练 4. 在一个文件中保存多个模型 5. 使用在不同…

02-CSS基础与进阶-day9_2018-09-12-20-29-40

定位 静态定位 position: static 相对定位 position: relative 绝对定位 position: absolute 脱标 参考点 子绝父相 让绝对定位的盒子水平居中和垂直居中 固定定位 position: fixed 参考点 浏览器左上角 固定定位的元素脱标不占有位置 兼容性 ie6低版本不支持固定定位 02绝对…

activity直接销毁_Android -- Activity的销毁和重建

两种销毁第一种是正常的销毁&#xff0c;比如用户按下Back按钮或者是activity自己调用了finish()方法&#xff1b;另一种是由于activity处于stopped状态&#xff0c;并且它长期未被使用&#xff0c;或者前台的activity需要更多的资源&#xff0c;这些情况下系统就会关闭后台的进…

Storm和Kafka集成的重要生产错误和修复

我将在此处描述Storm和Kafka集成模块的一些细节&#xff0c;一些您应该意识到的重要错误以及如何克服其中的一些错误&#xff08;尤其是对于生产安装&#xff09;。 我在生产安装中大量使用Apache Storm&#xff0c;并将Kafka作为主要输入源&#xff08;Spout&#xff09;。 …

博客园背景设置CSS代码

/配色参考->>->>>//https://zh.spycolor.com/color-index,a*/ #home { margin: 0 auto; width: 90%;/原始65/ min-width: 980px;/页面顶部的宽度/ background-color:rgba(233,214,107,0.3);/博客主页主体框的颜色/ padding: 30px; margin-top: 25px; margin-bot…

matplotlib 画多条折线图且x轴下标非数值

直接上python代码&#xff1a; # -*- coding: utf-8 -*- import matplotlib.pyplot as plt names [GFK, SA, DA-NBNN, DLID, DaNN, Ours] x range(len(names))y_1 [0.464, 0.45, 0.528, 0.519, 0.536, 0.841] y_2 [0.613, 0.648, 0.766, 0.782, 0.712, 0.954] y_3 [0.663…

julia常用矩阵函数_Julia系列教程3 数学运算 矩阵运算

数学运算https://www.zhihu.com/video/1113554595376295936数学运算比Matlab更直观的数学表达方式x 102x>>20但这就导致了可能会出现语法的冲突十六进制整数文本表达式 0xff 可以被解析为数值文本 0 乘以变量 xff浮点数文本表达式 1e10 可以被解析为数值文本 1 乘以变量…