移动端的触屏四个方法：touchstart，touchmove，touchend，touchcancel

移动端新增了4个与手指触摸相关的事件

touchstart：手指触摸手机屏幕时触发
touchmove：手指在手机屏幕移动时触发
touchend：手指离开手机屏幕时触发
touchcancel：系统取消touch事件的时候触发,比如电话

每个触摸事件被触发后，会生成一个event对象，event对象中changedTouches会记录手指滑动的信息。

e.touches;//当前屏幕上的手指e.targetTouches;//当前dom元素上的手指。e.changedTouches;//触摸时发生改变的手指。

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下

clientX / clientY: //触摸点相对浏览器窗口的位置pageX / pageY:     //触摸点相对于页面的位置

原生获取以及jquery获取的方法

Jquery的写法

$('#id').on('touchstart',function(e) {var touch = e.originalEvent.targetTouches[0];var x= touch.pageX;
});$('#id').on('touchmove',function(e) {var touch = e.originalEvent.targetTouches[0];var x= touch.pageX;
});$('#id').on('touchend',function(e) {var touch = e.originalEvent.changedTouches[0];var x= touch.pageX;
}

原生的写法

document.getElementById("id").addEventListener("touchstart",function(e)
{var x=e.touches[0].pageX;var y=e.touches[0].pageY;console.log("start",x)
})
document.getElementById("id").addEventListener("touchmove",function(e)
{var x=e.touches[0].pageX;var y=e.touches[0].pageY;console.log("move",x)
})
document.getElementById("id").addEventListener("touchend",function(e)
{var x=e.changedTouches[0].pageX;var y=e.changedTouches[0].pageY;console.log("end",x)
})

最后实现一个简单的滑动轮播思路

      var startX;var moveX;var endX;$('dom').on('touchstart',function(e){var touchE = e.originalEvent.targetTouches[0];//拿到触摸的对象startX = touchE.pageX;//记录开始位置clearInterval(timer);//清除轮播图的定时器});$('dom').on('touchmove',function(e){var touchE = e.originalEvent.targetTouches[0];moveX = touchE.pageX;//手指移动的位置$(this).css({'transition':'none',//清除过度'transform':'translateX('+ -当前位置 + moveX +'px)'// 让ul跟着移动});});$('.jd-banner ul').on('touchend',function(e){//1. 记录移动的距离var touchE = e.originalEvent.changedTouches[0];endX = touchE.pageX;//移动的距离//2. 判断移动距离是否超过1/3屏，判断上一屏还是下一屏，或者是吸附var mX = endX - startX;if( Math.abs(endX - startX) > liWidth / 3 ){mX > 0 ? index -- : index ++;//判断是否大于0 ，大于0 index--，向右滑动；小于0 index++, 向左滑动}//3. 添加过渡，移动. 执行动画$(this).css({'transition':'all .3s','transform':'translateX('+ (-index*liWidth) +'px)'});//4. 开启定时器timer = setInterval(run,1000);})

注意点

touchstart，touchmove方法中使用targetTouches[0]； touchend 需要使用changedTouches[0]
一般我们取第一个手指的坐标，如果有其他要求可能需要判断手指数量

if (e.targetTouches.length == 1)
{//...
}

有时需要组织默认行为，
e.preventDefault();

移动端的触屏四个方法：touchstart，touchmove，touchend，touchcancel相关推荐

手机html端悬浮球,手机移动端网站触屏可拖动悬浮球
手机移动端网站触屏可拖动悬浮球 touch { width: 60px; height: 60px; position: absolute; left: 600px; top: 300px; marg ...
移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
win11系统没有触屏怎么办 Windows11没有触屏的解决方法
很多用户都会使用电脑的触屏功能,方便快捷.但是不少用户升级win11系统之后发现触屏功能没有了,使用起来非常不习惯.针对这个问题,小编就给大家带来了解决方法,遇到同样问题的用户可以进行操作.更多win ...
vue webapp滑动事件_js_监听移动端web触屏事件_滑动响应
直接上我自址哈这工边识框处己按后大都加控不架的例子,以vue比抖朋要插支一圈不者地器享说几应用为例: html: @touchstart="touchstart()" @touch ...
Unity 手机平板触屏，触摸方法的使用
using System.Collections; using System.Collections.Generic; using UnityEngine;public class TouchTest ...
移动端事件（touchstart+touchmove+touchend）
移动端事件有哪些: 触摸事件手势事件传感器事件 (后面两个兼容性不怎么样,因此重点就是触摸事件) 触摸事件: touch 事件 pointer 事件 (PC端可能会使用jQuery做动画,移动端一 ...
移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
mobile.php discuz,电脑访问discuz手机版【触屏版跳转标准版的修改方法】
推荐方法: 以前我们介绍过如何通过修改Chrome浏览器运行参数的方法来模拟手机访问网站,但是在Chrome 32和33版本以后增加了更加便捷的方法,在开发者工具中只需要设置一下就能方便的模拟各种手机 ...
python控制苹果手机触摸屏失灵怎么办_iPhone手机触屏不灵敏怎么办触屏失灵乱跳等问题解决方法大全必看...
目前有很多的用户都正在使用苹果iphone iPhone触屏不灵敏怎么办解决方法一. 解决方法二. 苹果手机触摸屏不灵敏的解决方法二是,强制重启:同时按住iPhone的电源和Home键并保持几秒钟, ...

移动端的触屏四个方法：touchstart，touchmove，touchend，touchcancel

移动端新增了4个与手指触摸相关的事件

原生获取以及jquery获取的方法

最后实现一个简单的滑动轮播思路

移动端的触屏四个方法：touchstart，touchmove，touchend，touchcancel相关推荐

最新文章

热门文章