js实现touch移动触屏滑动事件

最新推荐文章于 2024-08-11 09:55:43 发布
最新推荐文章于 2024-08-11 09:55:43 发布
阅读量3.7k 收藏 5
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32328207/article/details/78458558
版权
本文介绍了JavaScript如何处理手机端的触摸事件，包括touchstart、touchmove、touchend和touchcancel四个事件，特别提到在touchmove事件中使用preventDefault()可以阻止屏幕滚动。并提供了手机端上下左右滑动的事件实现代码。
摘要由CSDN通过智能技术生成

由于手机端没有鼠标，所以就出现了触摸事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

最低0.47元/天 解锁文章
薄荷糖
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【JS教程】移动端 Touch（触摸）事件
我的博客
07-29 8209
最基本的touch事件包括4个事件： 1. touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 2. touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 3. touchend事件：当手指从屏幕上离开的时候触发。 4. touchcancel事件：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。...
浅谈移动端之touch事件--手指的滑动事件
weixin_30448685的博客
10-21 209
今天台风‘海马’袭击深圳，全市停工。现分享一篇关于touch的文章，望指教！ 原理： 当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY； 当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。 具体代码如下： $("body"...
JavaScript基础(32)_拖拽、鼠标移动事件
最新发布
no15870678621的博客
08-11 364
JS拖拽、鼠标移动事件
禁用/恢复手机默认的触屏滚动行为
xiaoshu611的博客
01-04 1273
禁用手机默认的触屏滚动行为 //阻止默认 $("body").on("touchmove",function(event){ event.preventDefault; }, false) //然后点击取消或者确定时再取消body上的绑定 $("body").off("touchmove");
原生 JS 实现移动端 Touch 滑动反弹
weixin_42145650的博客
01-19 1385
作者： Levi丶 https://segmentfault.com/a/1190000017852497 什么是 Touch滑动？就是类似于 PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 Touch事件结合 js去实现，效果如下： 1、准备工作 什么是移动端的 Touch事件？在移动端 Touch事件可以细分成三种，分别是： touchstart、 touchmove和 t......
JS移动客户端--触屏滑动事件及js手机拖拽效果
weixin_30604651的博客
11-07 188
移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: ...
浅谈移动端之js touch事件 手势滑动事件
10-21
移动端的JavaScript touch事件是为触屏设备设计的，它们允许开发者通过JavaScript监听触摸屏上...希望本文的讲解能够帮助开发者深入理解移动端的touch事件和手势滑动事件，以及在实现过程中可能遇到的问题和解决方案。
html5 touch事件实现触屏页面上下滑动(一)
09-28
以下是如何使用JavaScript和`touch`事件实现页面上下滑动的关键步骤： 1. 为`#outer`和`#inner`元素添加`touchstart`、`touchmove`和`touchend`事件监听器。 2. 在`touchstart`事件中，记录触摸开始时的`pageY`坐标...
JS实现touch 点击滑动轮播实例代码
10-20
在JavaScript中实现触屏点击滑动轮播效果是一种常见的网页交互功能，特别是在移动设备上，如手机或平板电脑。此实例代码主要展示了如何利用JS、jQuery库以及jQuery Mobile框架来创建一个滑动轮播效果。下面我们将...
原创js实现滑动触摸事件
m0_71933813的博客
08-27 938
原创js实现滑动触摸事件
JavaScript实现移动端跟手轮播图
weixin_45825426的博客
03-17 479
touch事件 了解触摸的仨事件： 事件 说明 touchstart事件 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend 当手指从屏幕上离开的时候触发。 这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践
javascript实现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）
weixin_30730053的博客
06-26 311
现支持iOS、Android和电脑 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="target-densitydpi=med...
用js实现判断触摸滑动方向
WanFengZhou
06-16 851
用js实现判断触摸滑动方向
Javascript移动端触屏滑动事件详解
tianxianghuiwei的博客
11-11 2081
同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches。
使用javascript实现手机上的touchmove效果
热门推荐
dongzhouT的专栏
11-26 2万+
javascript 手机手势动作touch触屏原理分析
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值