移动端事件

1.目标

掌握移动端 touch 事件使用
掌握 touch 事件和 mouse 事件的区别
掌握 touchEvent
实现移动端幻灯片

2.移动端touch事件

touchstart
touchmove
touchend
touch 事件和 mouse 事件的区别
事件点透： mouse 事件的延迟问题
阻止默认事件

阻止 touchstart 事件带来的影响
阻止 touchmove 事件带来的影响
阻止 touchend 事件带来的影响

2.1touch事件

user-scale=no设置移动端不能缩放

touchstart：手指触摸，手指在元素上按下
touchmove：手指移动，手指在元素上按下后，在屏幕任意位置移动
touchend：手指抬起，手指在元素按下后，在屏幕任意位置抬起

 <style>#box {width: 200px;height: 200px;background: red;}</style>
</head>
<body>
<div id="box"></div>
<script>
{let box = document.querySelector("#box");box.addEventListener("touchstart",function(){console.log("手指按下");});box.addEventListener("touchmove",function(){console.log("手指移动");});box.addEventListener("touchend",function(){console.log("手指抬起");});
}
</script>
</body>

结果：

2.2touch 事件和 mouse 事件的区别

同样使用mouse 事件时：

    box.addEventListener("mousedown",function(){console.log("鼠标按下");});box.addEventListener("mousemove",function(){console.log("鼠标移动");});box.addEventListener("mouseup",function(){console.log("鼠标抬起");});

touch 事件和 mouse 事件的区别：

mousedown：鼠标按下 touchstart：手指触摸
mousemove：鼠标移动 touchmove：手指移动
moveup：鼠标抬起 touchend：手指抬起
touch事件只能在移动端使用；mouse事件只能在PC端使用；
touch事件的touchstart只能在元素内触发，touchmove和touchend可以在屏幕任意位置触发；mouse事件都只能在元素内触发；
touch事件只有在touchstart触发后，才能触发touchmove和touchend事件；但mouse事件的mousemove只要在元素内没有鼠标按下也能触发

2.3事件点透(点击穿透)及解决方案

事件点透是移动端的一个bug。

事件点透：

移动端中，到底支不支持鼠标事件？移动端是兼容鼠标事件的，如点击事件。

移动端鼠标事件问题：移动端鼠标事件本身会有300ms左右的延迟。当在移动端中手指触碰元素后，会立即执行touch事件，然后会记录当前触发事件坐标，当延迟300ms后，会在该坐标位置查找元素，如果该元素有对应的鼠标事件，就会执行。如淘宝中基本没有使用a标签，就是以为事件点透。

事件点透解决方案：

在移动端不要使用鼠标事件，包括a标签的href;
使用延时定时器，在300ms后再执行（不推荐）;
阻止默认事件e.preventDefault()。（注意在最新Chrome下不能直接使用e.preventDefault()，需要加上passive:false允许阻止浏览器默认事件）

PC端下正常效果：在百度上只点击一次时，div消失，百度不会跳转

    <style>#box {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background: red;opacity: .2;}</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div id="box"></div>
<script>
{let box = document.querySelector("#box");box.addEventListener("mousedown",()=>{// console.log("鼠标按下");box.style.display = "none";});
}
</script>
</body>

移动端下效果（bug）：在百度上只点击一次时，div消失，且直接跳转到了百度页面

let box = document.querySelector("#box");box.addEventListener("touchend",()=>{box.style.display = "none";});

解决移动端下点击穿透：不使用鼠标事件（包括a标签的href）；阻止浏览器默认事件e.preventDefault()

let box = document.querySelector("#box");box.addEventListener("touchend",(e)=>{box.style.display = "none";e.preventDefault();});

2.4移动端阻止默认事件后带来的问题

一般不建议在移动端阻止浏览器默认行为，会带来很多问题。

在移动端touchstart下阻止浏览器默认行为：

禁止多指操作时页面缩放；
禁止页面的橡皮筋效果(下拉)；
阻止滚动条滚动(PC端模拟器下滚轮可用，但移动端没有滚轮)；
阻止鼠标事件触发；
输入框不能进行输入；
阻止长按选中文字，弹出菜单；

在移动端touchmove下阻止浏览器默认行为：

禁止多指操作时页面缩放；
禁止页面的橡皮筋效果(下拉)；
阻止滚动条滚动

在移动端touchmend下阻止浏览器默认行为：

阻止鼠标事件触发；
输入框不能进行输入；
阻止长按选中文字，弹出菜单；

移动端touchstart下阻止默认事件后：

    <style>#list {padding: 0;margin: 0;}#list li {height: 30px;}</style>
</head>
<body><a href="http://www.baidu.com">百度</a><br><input type="text"><ul id="list"></ul>
<script>
{let list = document.querySelector("#list");// 通过30个.创建30lilist.innerHTML += [...(".".repeat(30))].map((item,index)=>{return `<li>这是第${index}个li</li>`;}).join("");document.addEventListener("touchstart",(e)=>{e.preventDefault();},{//最新Chrome浏览器下，不允许设置阻止浏览器默认行为，只有设置了passive:false后才会被允许passive:false});
}
</script>
</body>

移动端touchmove下阻止浏览器默认行为：

document.addEventListener("touchmove",(e)=>{e.preventDefault();},{passive:false});

移动端touchend下阻止浏览器默认行为：

  document.addEventListener("touchend",(e)=>{e.preventDefault();},{passive:false});

3.TouchEvent 对象详解

touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表

    <style>#box {width: 300px;height: 200px;padding: 10px;background: red;font: 20px/40px "宋体";color: #fff;}</style>
</head><body><div id="box"></div><script>{let box = document.querySelector("#box");document.addEventListener("touchstart", function (e) {//阻止浏览器默认行为，让多指在屏幕上时，不会有缩放等行为e.preventDefault();}, {passive: false});box.addEventListener("touchmove", function (e) {box.innerHTML = `当前屏幕上的手指列表：${e.touches.length}<br/>当前元素上的手指列表：${e.targetTouches.length}<br/>触发当前事件的手指列表：${e.changedTouches.length}`;});}</script>
</body>

4.案例：移动端滑屏切换的幻灯片

5.下节内容

- 重力加速度

- 摇一摇实现

- 函数防抖与函数节流

搞定移动端一(移动端 touch 事件，TouchEvent 对象)相关推荐

QT：触摸屏支持手指触摸，增加touch事件touchevent，记录前后touch坐标并处理
QT:触摸屏支持手指触摸,增加touch事件touchevent,记录前后touch坐标并处理 1.手指触摸事件当做鼠标事件去响应的可行性 2.触摸事件touchEvent的添加 3.重写touch事 ...
一个方案搞定从模型量化到端侧部署全流程
量化的背景得益于海量数据.超强算力和最新技术,深度学习在视觉.自然语言处理等领域都取得了巨大成功.然而,深度学习模型的网络结构越来越复杂.参数越来越多.计算量越来越大,给模型部署应用带来了不小挑战, ...
移动端web开发---Touch事件详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题移动设备主要特点是不配备鼠标,键盘 ...
html 触摸屏页面,HTML5触摸屏touch事件使用实例1
1.源码: .divFixed { width: 100px; height: 100px; font-size: 15px; text-align: center; border: 2px soli ...
iframe带了token不显示_不就是登录吗，能有多复杂？sa-token带你轻松搞定多地登陆、单地登录、同端互斥登录...
前言在java的世界里,有很多优秀的权限认证框架,如Apache Shiro.Spring Security 等等.这些框架背景强大,历史悠久,其生态也比较齐全. 但同时这些框架也并非十分完美,在前 ...
大前端时代搞定PC/Mac端开发，我有绝招
如果你是一位前端开发工程师,对"跨平台"一词应该不会感到陌生.像常见的前端框架:比如React.Vue.Angular,它们可以做网页端,也可以做移动端,但很少能做到跨PC.Mac ...
B端产品经理的心得之如何搞定客户
做了几年的B端产品经理深刻感受到B端产品经理和C端产品的区别,现总结一些心得,希望对转型B端产品经理的人有些帮助. 首先B端产品经理不同于C端产品的一个重大的区别在于,B端产品在产品和用户之前多了一个 ...
如何在原先的jqgrid中填充新的数据_自然人电子税务局（扣缴端）数据如何恢复？申税小微教您轻松搞定...
自然人电子税务局数据如何恢复? 申税小微教您轻松搞定! 财务小王:申税小微,我们公司换了新电脑,重新安装的自然人电子税务局(扣缴端)上没有人员采集信息和历史申报数据该怎么办? 申税小微: 1.可以在 ...
【快速搞定】教你如何快速集成环信（android端EaseUI），跳过我踩过的坑
[快速搞定]教你如何快速集成环信(android端EaseUI),跳过我踩过的坑一.前言最近,公司准备集成一个即时通讯的功能,于是我找到了环信,于是我就这样被坑了,于是就有了本文来教大家如何跳出我 ...

搞定移动端一(移动端 touch 事件，TouchEvent 对象)

1.目标

2.移动端touch事件

2.1touch事件

2.2touch 事件和 mouse 事件的区别

2.3事件点透(点击穿透)及解决方案

2.4移动端阻止默认事件后带来的问题

3.TouchEvent 对象详解

4.案例：移动端滑屏切换的幻灯片

5.下节内容

搞定移动端一(移动端 touch 事件，TouchEvent 对象)相关推荐

最新文章

热门文章

搞定移动端一(移动端 touch 事件，TouchEvent 对象)

1.目标

2.移动端touch事件

2.1touch事件

2.2touch 事件 和 mouse 事件的区别

2.3事件点透(点击穿透)及解决方案

2.4移动端阻止默认事件后带来的问题

3.TouchEvent 对象详解

4.案例：移动端滑屏切换的幻灯片

5.下节内容

搞定移动端一(移动端 touch 事件，TouchEvent 对象)相关推荐

最新文章

热门文章

2.2touch 事件和 mouse 事件的区别