js书写移动端常用事件

最新推荐文章于 2022-08-02 15:29:10 发布
最新推荐文章于 2022-08-02 15:29:10 发布
阅读量592 收藏
点赞数
文章标签： 移动端 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" />

 

 

_change____________
关注
JavaScript点击div改变div的颜色
qqq777_的博客
10-21 2260
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ w
HTML---JS移动端触屏事件touch详解
qq_51874203的博客
05-25 1848
HTML---JS移动端触屏事件touch详解
移动端常用事件
欧阳的技术博客
11-18 436
touchstart 与 click touchstart : 触摸开始事件，当手指接触屏幕上的一刹那，触发该事件。 click: PC端点击事件，在移动端也可以使用，不过会有200ms延迟，一般不建议使用。 var box = document.getElementById("touchstart"); box.addEventListener("touchstart", func...
移动端常用事件整理
weixin_46032850的博客
07-17 480
1. 网络状态改变事件 H5新增了两个监听网络状态改变的事件 online 网络已连接 offline 网络已断开 window.addEventListener('online',() => { console.log('网络已连接') }); window.addEventListener('offline', () => { console.log('网络已断开') }); 2. 全屏 HTML5规范允许用户自定义网页上的任意元
js---移动端触摸事件
清风的博客
09-16 759
触摸事件 1.触屏touch事件 touch对象代表一个触摸点,触摸点可能是一根手指,或者一根触摸笔,触屏事件可响应用户手指或者触屏笔对屏幕或者触控板操作; //触屏touch事件 //手指触摸到一个DOM元素时触发 touchstart; //手指在一个DOM元素上滑动时触发 touchmove; //手指从一个DOM元素上移开时触发 touchend; 2.触摸事件对象(touchEvent...
Web APIs——触屏事件，移动端常见特效，classList属性，移动端常用开发插件，移动端常用开发框架，本地存储
qq_43498002的博客
11-19 351
1.1. 触屏事件 1.1.1. 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 常见的触屏事件如下： 触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 to
JS基础—移动端网页特效
m0_57726319的博客
05-16 980
目录 一、触屏事件 1.1 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动 端也有自己独特的地方。 比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控 笔）对屏幕或者触控板操作。 常见的触屏事件如下： <script> var div = docum.
js移动端基础知识
honeygirl_的博客
11-16 472
day07 - Web APIs 学习目标: 能够写出移动端触屏事件 能够写出常见的移动端特效 能够使用移动端开发插件开发移动端特效 能够使用移动端开发框架开发移动端特效 能够写出 sessionStorage 数据的存储以及获取 能够写出 localStorage 数据的存储以及获取 能够说出它们两者的区别 1.1. 触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑...
Vue.js开发移动端APP
weixin_33951761的博客
04-18 2808
之前一直用AngularJS进行开发，最近打算系统学习Vue.js。下面主要是我学习过程中心得的总结和遇到的技术难点： 第一部分：技术准备 Vue-cli 搭建基本项目结构 vue-router 实现路由管理 vue-resource 实现ajax通信 1.Vue-cli 脚手架 搭建基本代码框架 1.vue.js 2.x 版本脚手架中没有dev-server.js 如何进行数据模拟 点这...
移动端js触摸事件详解
11-26
在移动开发中，一种较为容易的做法是，先在桌面上开始原型设计，然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一，因为大部分的PC都没有触摸输入。  不得不在移动设备上进行的测试有可能会拉长你的开发周期，因为你所做的每项改变都需要提交代码到服务器上，接着再加载到设备上。然后，一旦运行后，对应用也就没有太多的调试了，因为平板电脑和智能手机都很缺乏web开发者所用的工具。 这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸，触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话，比如说现代的App MacBook，那么多点触摸也可以被模拟。
浅谈移动端之js touch事件 手势滑动事件
11-27
现分享一篇关于touch的文章，望指教！ 原理： 当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY； 当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。 具体代码如下： $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEve
JS移动端对手势进行处理事件
01-25
JS移动端对手势进行处理事件。纯JS简单事件 很好的例子！卫班科技
js中移动端事件
个人笔记
04-02 772
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type=
JS移动端事件
benlalagang的博客
08-02 2044
JS移动端事件、触屏事件、事件对象、拖动元素、返回顶部、解决点击延迟、classList方法
js移动端事件
陌上尘的博客
07-12 2681
1.触摸事件 click事件多用于pc端,在移动端有延迟 touchstart() //手指触摸屏幕 touchmove() //手指在屏幕上移动 touchend() //手指离开屏幕 touchcancle() //触摸被系统事件终段 var d1 = document.getElementById("d1"); d1.addEventListener("touchstart",...
移动端 js事件
LGDmar的博客
07-30 280
移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。  以下是四种touch事件  touchstart: //手指放到屏幕上时触发  touchmove: //手指在屏幕上滑动式触发  touchend: //手指离开屏幕...
JavaScript移动端事件
weixin_49230250的博客
07-17 1391
移动端事件 ontouchstart 手指按下 ontouchmove 手指移动 ontouchend 手指抬起 因为浏览器模拟移动端不稳定推荐使用 addEventListener（） pc端事件写在移动端上有300ms延迟 移动端事件对象 touches 屏幕上的手指列表（集合） targetTouches 位于当前dom元素上的手指列表 （集合） changedTouches 触发了当前时间的手指列表（集合） 事件对象的部分属性 target 触发事件的对
移动端javascript之事件
shut1k的博客
11-15 874
移动端javascript之事件原文写于 2014-12-23 https://github.com/kuitos/kuitos.github.io/issues/13Javascript的事件体系想必大家都已经耳熟能详了，它是支撑起前端交互的支柱，当然我们这里不讲DOM2 抑或DOM3 里的标准事件，这里来说说基于移动端的、单点触碰事件(多点及手势事件后续有空咱再聊)。 移动端事件的标准最初是由
使用js 实现移动端长按事件
最新发布
05-24
可以使用 `touchstart` 和 `touchend` 事件来实现移动端的长按事件。下面是一个使用 JavaScript 实现的例子： ```javascript let pressTimer = null; // 开始触摸事件，设置定时器 document.addEventListener('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值