<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端touch事件</title> <style> #div { width: 100%; height: 800px; border: 1px solid #000; } </style> </head> <body> <div id="div"></div> <script type="text/javascript"> var div = document.getElementById('div'); div.addEventListener('touchstart', function(event) { // var ev = event || ev; event.preventDefault(); div.style.background = 'red'; }, false); //touchstart 当手指触摸屏幕时 div.addEventListener('touchmove', function(event) { // var ev = event || ev; event.preventDefault(); div.style.background = 'blue'; }, false); //touchmove 当手指在屏幕上移动时 div.addEventListener('touchend', function(event) { // var ev = event || ev; event.preventDefault(); div.style.background = 'yellow'; }, false); //touchend 当手指划过屏幕时 </script> </body> </html>
移动端touch事件demo效果示例（整理）
2023-09-15
70
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
移动端touch事件demo效果示例（整理）
目录
相关文章
|
10月前
|
JSON
小程序
前端开发
|
JavaScript
|
JavaScript
|
移动开发
|
小程序
uniapp小程序跳转其他小程序uni.navigateToMiniProgram效果demo（整理）
uniapp小程序跳转其他小程序uni.navigateToMiniProgram效果demo（整理）
556
0
0
热门文章
最新文章
1
域名ICP备案时网站备注到底该怎么写？全网最全教程来了
2
网络安全-反弹shell详解（攻击，检测与防御）
3
上海ACE同城会演讲实录|云原生分布式数据库PolarDB-X
4
4.[研磨设计模式笔记]适配器模式
5
ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务
6
基于Windows 7中的 Ribbon开发技术应用
7
LVS+keepalived负载均衡兼高可用集群配置
8
移动应用图片的福音--七牛云存储
9
oracle与sql server大批量存储过程可以替换部分
10
lxde 桌面环境使用compiz-gtk
1
阿里云认证全新发布【Apsara Clouder云计算专项技能认证：云服务器ECS入门】
14
2
阿里云云计算ACA、大数据ACA、人工智能ACA三门认证升级调整公告
14
3
阿里云新版ACE考试通关经历回顾
14
4
算法系列之排序算法-堆排序
18
5
认证故事|阿里云新版ACE全球第五人考试经历回顾
11
6
阿里云新版ACE考试通关经历回顾
26
7
2024阿里云天池大学生竞赛正式开赛，全网招募高校最强大脑！
13
8
「阿里云认证」年度标杆企业奖揭晓
13
9
对话阿里云CIO蒋林泉：AI时代，企业如何做好智能化系统建设？
12
10
基于惯性加权PSO优化的目标函数最小值求解matlab仿真
13