js书写移动端常用事件_js 移动端 手写事件-程序员宅基地

技术标签: JS移动端  移动端  移动端事件  过渡动画事件  

 

移动端的事件是新增的,叫“touch”事件 触摸事件。

click点击事件依然支持,会有300ms的延迟

touchstart, tap, click的加载快慢顺序

touchstart > tap > click

 

开始触摸 :touchstart

触摸移动:touchmove

触摸结束:touchend

 

事件对象

获取手指按下的位置

在touchstart 和 touchmove 中:

e . touches[0].clientX

在touchend中:

e . changedTouches[0].clientX

 

当一个元素过渡完成之后会触发”transitionend“事件

注意:只有过渡结束事件,没有过渡开始事件

当一个元素动画开始的时候,会触发”animationstart“事件

当一个元素动画结束的时候,会触发”animationend”事件

 

书写移动端通常使用Zepto库

Zepto是一个轻量级的针对现代高级浏览器的JS库,它与jQuery有着类似的api

zepto是分模块的,使用什么模块都需要下载,很方便

Zepto的touch模块中的一些常用自定义移动端事件

swipe: 滑动

swipeLeft:左滑动

swipeRight:右滑动

swipeUp:上滑动

swipeDown:下滑动

tap:触碰

doubleTap:触碰两次

singleTap:触碰一次

longTap:长按(750ms之后执行)

 

客户端需要书写的meta标签 约束视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42433932/article/details/81159424

智能推荐

以MapBox为核心构建Vue地图组件库教程_vue 省份 地图组件库-程序员宅基地

文章浏览阅读951次。不多废话直接讲干货,首先我们要清楚如何写一套组件库,类似于使用vue编写的elementui,使用react编写的antdesign等,我们现在要以GIS为核心写组件库,其实原理类似。一个是组件的主体vue文件,另一个是将组件局部暴露出去的index.js文件,当然你可以再此基础上增加你想要的其他的js文件和vue文件,上面讲的两个文件是必须的。这行命令可以将你写的组件库打包成压缩文件,一般是一个dist静态目录,在进行npm发布的时候也是将这个静态的dist发布在官网上。_vue 省份 地图组件库

【控制control】四足机器人弹簧加载倒立摆(SLIP)动力学模型_【控制control】四足机器人动力学模型-slip-程序员宅基地

文章浏览阅读4.9k次,点赞5次,收藏32次。系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加TODO:写完再整理文章目录系列文章目录前言1.动力学建模构型方法2.四足机器人动力学模型(1)多体动力学模型【针对躯干+脚建模】方法一:VMC( Virtual Model Controller)模型方法二:SLIP模型(2)浮基单体动力学模型【针对躯干建模】【用于MPC】前言认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长!本文先对四足机器人动力学模型-VMC、SLIP和浮动机体模型做个简_【控制control】四足机器人动力学模型-slip

html5手指点击速度,CPS手速测试 - 鼠标点击速度测试插件-程序员宅基地

文章浏览阅读1.2w次。CPS手速测试插件背景简介为了刺激客户的消费很多购物平台都推出来秒杀抢购的活动,在这个活动中如果你的手速慢就抢不到商品,所以有时我们会需要锻炼一下自己的手速,那如何知道自己的手速是快还是慢呢,在世界平均范围中又处于何种地步,今天小编为大家推荐一款可以检测自己手速的插件CPS手速测试。CPS手速测试插件简介CPS手速测试插件是一款可以在线测试鼠标点击速度的检测工具,它可以是1/3/5/10/15/3..._测速度插件

VLAN以及三层交换机_核心交换机如何查询vlan-程序员宅基地

文章浏览阅读2k次,点赞2次,收藏7次。VLAN以及三层交换机1、VLAN概述与优势1.1vlan概述1.2vlan优势1.3VLAN的分类Trunk概述三层交换技术1、VLAN概述与优势1.1vlan概述VLAN(Virtual Local Area Network),中文称为虚拟局城网。是一组逻辑上隔离的设备和用户。这些设备和用户不受物理位置限制,可根据部门成组等进行灵活划分,保障信息安全。同时隔绝广播信息,提升网络效能,防止广播风暴的产生。1.2vlan优势1. 限制广播域。广播域被限制在一个VLAN内,提高了网络处理能力。 2_核心交换机如何查询vlan

clearTimeout无效_cleartimeout不生效-程序员宅基地

文章浏览阅读7.3k次。如图所示clearTimeout接受id作为参数,所以检查一下是否传入的不是id因为默认情况下setTimeout方法是会返回id但有时候会返回一个setTimeout对象比如使用vsCode 开发的同学在使用setTimeout时会自动引入timer对象,此时setTimeout就会返回Timeout对象,此时只需要将对应的id传入即可或者直接将引用注掉..._cleartimeout不生效

安卓发送post请求_android post-程序员宅基地

文章浏览阅读1.6k次。在HTTP通信中使用最多的就是GET和POST了,GET请求可以获取静态页面,也可以把参数放在URL字符串的后面,传递给服务器。本文将使用标准Java接口HttpURLConnection,以一个实例演示如何使用POST方式向服务器提交数据,并将服务器的响应结果显示在Android客户端。在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持。将提交的数据写入Log\Log.php文件中。_android post

随便推点

探索iOS转场动画_ios 转场动画-程序员宅基地

文章浏览阅读1.5k次,点赞2次,收藏3次。iOS提供图像转场动画,可实现酷炫的转场特效。动画包括:溶解、折叠、复印机、闪烁、翻页、波纹、滑动等等。_ios 转场动画

Java 本地内存 & 直接内存 & 元空间_java 本地内存和直接内存-程序员宅基地

文章浏览阅读4.1k次,点赞7次,收藏26次。Java虚拟机在执行的时候会把管理的内存分配到不同的区域,这些区域称为虚拟机内存;同时对于虚拟机没有直接管理的物理内存,也会有一定的利用,这些被利用但不在虚拟机内存的地方称为本地内存。元空间不在虚拟机中,而是使用本地内存,JVM不会再出现方法区的内存溢出问题。..._java 本地内存和直接内存

C++静态库与动态库_c++的静态库 类一定是静态的吗?-程序员宅基地

文章浏览阅读158次。C++静态库与动态库这次分享的宗旨是——让大家学会创建与使用静态库、动态库,知道静态库与动态库的区别,知道使用的时候如何选择。这里不深入介绍静态库、动态库的底层格式,内存布局等,有兴趣的同学,推荐一本书《程序员的自我修养——链接、装载与库》。什么是库库是写好的现有的,成熟的,可以复用的代码。现实中每个程序都要依赖很多基础的底层库,不可能每个人的代码都从零开始,因此库的存在意义非同寻常。本质..._c++的静态库 类一定是静态的吗?

快速上手JDBC_jdbc url用于标识一个被注册的驱动程序,驱动程序管理器通过与这个url选择正确-程序员宅基地

文章浏览阅读793次。目录一、步骤二、ORM思想三、如何获取连接1.Driver接口实现类2.URL3.用户名和密码4.代码示例四、如何实现CRUD操作1.PreparedStatement 与 Statement ​2.ResultSet与ResultSetMetaData3.增删改代码示例(通用)4.查询代码示例(通用)一、步骤1.导入所需数据库的jar包,(这里以mysql为例)2.获取连接3.连接后进行CRUD操作二、ORM思想..._jdbc url用于标识一个被注册的驱动程序,驱动程序管理器通过与这个url选择正确

【安卓学习之第三方库】 Rxpay学习:支付宝微信支付-程序员宅基地

文章浏览阅读990次。█ 【安卓学习之第三方库】 Rxpay学习:支付宝微信支付█ 相关文章:【安卓学习之第三方库】库的使用2-jar类库的使用(以dom4j为例)和升级(以极光推送为例)【安卓学习之第三方库】 消息推送之极光推送【安卓学习之第三方库】 消息推送之阿里云推送 █ 读前说明:本文通过学习别人写demo,学习一些课件,参考一些博客,’学习相关知识,如果涉及侵权请告知本文只简单罗列相关的代码实现过程涉及到的逻辑以及说明也只是简单介绍,主要当做笔记,了解过程而已下载demo█ 在An_rxpay

#671. 优美!最长上升子序列、#736. 上帝的集合_优美!最长上升子序列-程序员宅基地

这篇文章是关于一个优美的问题:如何找出给定数组中最长的递增子序列。文章提出了解决这个问题的方法,并给出了相应的代码实现。

推荐文章

热门文章

相关标签