移动端笔记01

最新推荐文章于 2024-08-12 22:28:07 发布
最新推荐文章于 2024-08-12 22:28:07 发布
阅读量169 收藏
点赞数
分类专栏： 移动端 文章标签： app javascript css es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47325510/article/details/107907496
版权
本文详细介绍了移动端的touch事件，包括touchstart、touchmove和touchend，对比了它们与mouse事件的区别。还讨论了事件点透现象、300ms延迟问题以及如何阻止默认事件。同时提到了TouchEvent对象的属性，如touches、targetTouches和changedTouches，并分享了better-scroll库的使用。此外，文章还涉及了事件防抖和节流的实现，以及横竖屏切换、加速度事件的监听与兼容性处理。
摘要由CSDN通过智能技术生成

touch事件

  • 移动端touch事件

    • touchstart：手指在元素上摁下

    • touchmove：手指在元素上摁下之后，在屏幕中移动

    • touchend：手指在元素上摁下之后，在屏幕中抬起

    • touch 事件 和 mouse 事件的区别

      mousedown --> touchstart

      mousemove --> touchmove

      mouseup --> touchend

    • 事件点透

      • mouse 事件的延迟问题

        事件点透：
        在移动端中，手指触碰时，如果有 touch 事件，会立即执行，
        并记录触碰坐标，在一定时间延迟后(300ms以内),在该坐标上查找元素，如果元素有mouse事件，就执行。

    • 阻止默认事件

      ​ 如果要给 document、html、body这些元素的touch事件中阻止默认事件，一定记得设置，passive:false。

      • 阻止 touchstart 事件带来的影响
        1. 默认双指缩放被禁止
        2. 滚动条被禁止
        3. 鼠标事件被禁止（包括a标签的href）
        4. 禁止长按菜单弹出
        5. 阻止元素获得焦点和失去焦点
      • 阻止 touchmove 事件带来的影响
        1. 默认双指缩放被禁止
        2. 滚动条被禁止

  • Touc

最低0.47元/天 解锁文章
Escape甯甯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IOS 陀螺仪开发(CoreMotion框架)实例详解
01-20
iOS陀螺仪 参数意义 self.mManager = [[CMMotionManager alloc]init]; self.mManager.deviceMotionUpdateInterval = 0.5; if (self.mManager.gyroAvailable) { [self.mManager startDeviceMotionUpdatesToQueue:[NSOperationQueue currentQueue] withHandler:^(CMDeviceMotion * _Nullable motion, NSError * _Nullable e
iOS开发中的这些权限
LGSC的IOS学习之路专栏
07-20 1342
写在前面 APP开发避免不开系统权限的问题，如何在APP以更加友好的方式向用户展示系统权限，似乎也是开发过程中值得深思的一件事； 那如何提高APP获取iOS系统权限的通过率呢？有以下几种方式:1.在用户打开APP时就向用户请求权限；2.告知用户授权权限后能够获得好处之后，再向用户请求权限；3.在绝对必要的情况下才向用户请求权限，例如：用户访问照片库时请求访问系统
解决ios13+动作与方向的权限的获取问题，从而导致无法实现摇一摇
qq_26642611的博客
04-19 5862
function iosGrantedTips(){ var ua = navigator.userAgent.toLowerCase(); if(ua.indexOf(“like mac os x”) > 0){ var reg = /os [\d.]*/gi ; var verinfo = ua.match(reg) ; var version = (verinfo+"").replac...
IOS 13陀螺仪监控
qq_26642611的博客
04-19 1650
摘自 这是 IOS 13 之后的，苹果给我新增的一个方法用来获取用户权限，获取到用户权限之后，我们就可以来检测加速度了，但是注意该方法是 IOS 13 之后才有的，在 IOS 13 之前这么写的话，DeviceMotionEvent下并没有requestPermission方法就会报错，另外注意在最新的 IOS 13.3里，该方法需要用户触发获取，所以我们来看看最终版要写成什么样子，代码如下： &...
移动端web学习笔记.doc
07-23
以下是一份详细的移动端Web学习笔记，涵盖了标题和描述中提到的几个关键知识点。 首先，移动端标准设置涉及到HTML的`<meta>`标签，尤其是`viewport`属性。这个标签告诉浏览器如何调整网页的宽度和缩放以适应不同的...
移动端笔记 平面转换2D
03-09
移动端笔记 平面转换2D
移动端CSS的学习笔记。
01-19
【移动端CSS学习笔记】 在移动端开发中，CSS扮演着至关重要的角色，因为它负责网页的样式和布局。本文将深入探讨移动端CSS的相关知识点，包括调试工具、视口设置、图片处理、布局策略以及响应式设计。 1. **谷歌...
HTML5与移动端web学习笔记
02-26
新的HTML元素，例如section,nav,header,footer,article等用于绘画的Canvas元素用于多媒体播放的video和audio元素用于定位的GeolocationAPI本地存储以及离线应用WebWorkers、WebWebSocketAPI手机网页开发。...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 464
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 615
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
song854601134的博客
08-12 121
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 315
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 415
注释很详细，直接上代码……
【Markdown】Markdown 中的语言简称
最新发布
EleganceJiaBao的博客
08-12 447
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
【Vue3】图片未加载成功前占位
菜就多练
08-08 332
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
【Ajax使用说明】Ajax、Axios以及跨域
aaaa_aaab的博客
08-12 662
XML：可扩展标记语言XML：被设计用来传输和存储数据XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据现在已被JSON取代。
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 459
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
基于微信小程序的心理测评平台设计与实现
No_Name_Cao_Ni_Mei的博客
08-12 190
本文旨在设计与实现一个基于微信小程序的心理测评平台。该平台将提供心理测评问卷、分析报告和个性化建议等功能，旨在帮助用户了解自身心理状况并提供适当的改善方案。该平台将采用微信小程序作为开发平台，具备跨平台、便捷性等优势，能够满足用户在手机应用中进行心理测评的需求。本平台主要分为用户端和管理员端两个模块。用户端提供注册、登录、心理测试问卷填写等功能，同时可以生成个人心理分析报告和个性化建议。管理员端可以管理测试问卷、生成报告和建议，并管理用户信息和反馈意见。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1671
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
pink老师移动端笔记
09-01
pink老师的移动端笔记来源于他的前端课程。这些笔记整理自他的前端入门教程，该教程可以在Bilibili上找到。笔记中包含了关于CSS的一些内容，比如CSS的颜色属性和文本装饰，以及CSS3过渡的使用方法。这些笔记可以帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值