移动端事件（touchstart+touchmove+touchend）

移动端事件有哪些：

触摸事件

手势事件

传感器事件

（后面两个兼容性不怎么样，因此重点就是触摸事件）

触摸事件：

touch 事件

pointer 事件

（PC端可能会使用jQuery做动画，移动端一般不会，基本都是使用css3做动画）

ontouchstart （必须在元素内部才能触发）

ontouchmove （元素内外都能触发）

ontouchend （元素内外都能触发）

ontouchcancel 触摸中断，多用于系统级处理，比如在触摸时突然接了个电话（一般几乎是用不上的）

推荐使用 addEventListener 来绑定事件，除非因为兼容性原因使用 on

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>touch</title><style>.box{width:200px;height:200px;background:pink;margin:20px auto;}</style>
</head>
<body><div class="box" id="box"></div><script>var box=document.getElementById("box");// box.ontouchstart=handleStart;// box.ontouchmove=handleMove;// box.ontouchend=handleEnd;
box.addEventListener("touchstart",handleStart,false);box.addEventListener("touchmove",handleMove,false);box.addEventListener("touchend",handleEnd,false);function handleStart(){console.log("touchstart");}function handleMove(){console.log("touchmove");}function handleEnd(){console.log("touchend");}</script>
</body>
</html>

touch事件的event对象

比较重要的属性

type: "touchstart" 触发的事件

target: div#box.box 触摸的元素

changedTouches: TouchList {0: Touch, length: 1} 发生变化的触摸点

targetTouches: TouchList 目标元素上的触摸点

touches: TouchList {0: Touch, length: 1} 所有触摸点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>touch</title><style>.box{width:200px;height:200px;background:pink;margin:20px auto;}</style>
</head>
<body><div class="box" id="box"></div><script>var box=document.getElementById("box");// box.ontouchstart=handleStart;// box.ontouchmove=handleMove;// box.ontouchend=handleEnd;
box.addEventListener("touchstart",handleStart,false);box.addEventListener("touchmove",handleMove,false);box.addEventListener("touchend",handleEnd,false);function handleStart(e){console.log("touchstart");console.log(e.changedTouches[0]);}function handleMove(e){console.log("touchmove");console.log(e);}function handleEnd(e){console.log("touchend");console.log(e);}</script>
</body>
</html>

clientX clientY 指视口到触摸点的距离（不包括滚动距离）

pageX pageY 视口到触摸点的距离（包括滚动距离）

单指拖拽案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>touch</title><style>.backtop{width:90px;height:90px;position: fixed;bottom:20px;right:20px;line-height:90px;text-align: center;background:rgba(0,0,0,.6);border-radius:50%;color:#fff;font-size:60px;-webkit-tap-highlight-color:transparent;/*transform:translate3d(x,y,0);在移动端使用会开启GPU加速，会让动画性能变高*/}</style>
</head>
<body><a href="#" id="backtop" class="backtop">&uarr;</a><script>function drag(el,options){options.x=typeof options.x!=="undefined"?options.x:true;options.y=typeof options.y!=="undefined"?options.y:true;if(!options.x&&!options.y) return;var curPoint={x:0,y:0};var startPoint={};var isTouchMove=false;el.addEventListener("touchstart",handleStart,false);el.addEventListener("touchmove",handleMove,false);el.addEventListener("touchend",handleEnd,false);function handleStart(e){var touch=e.changedTouches[0];startPoint.x=touch.pageX;startPoint.y=touch.pageY;}function handleMove(e){e.preventDefault();//阻止默认行为（滚动条滚动）
                isTouchMove=true;var touch=e.changedTouches[0];var diffPoint={};//要移动的距离var movePoint={//移动之后的距离
                    x:0,y:0};diffPoint.x=touch.pageX-startPoint.x;diffPoint.y=touch.pageY-startPoint.y;if(options.x){movePoint.x=diffPoint.x+curPoint.x;//移动之后的距离=要移动的距离+当前距离
                }if(options.y){movePoint.y=diffPoint.y+curPoint.y;}move(el,movePoint.x,movePoint.y);}function handleEnd(e){if(!isTouchMove) return;var touch=e.changedTouches[0];curPoint.x+=touch.pageX-startPoint.x;//更新当前位置
                curPoint.y+=touch.pageY-startPoint.y;isTouchMove=false;}function move(el,x,y){x=x||0;y=y||0;el.style.transform="translate3d("+x+"px,"+y+"px,0)";}}var backtop=document.getElementById("backtop");drag(backtop,{x:true,y:true});</script>
</body>
</html>

移动端事件（touchstart+touchmove+touchend）相关推荐

移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
移动web JavaScript,事件(touchstart,touchmove,touchend)
demo(认识点击时间差).html: <!DOCTYPE html> <html lang="en"> <head><meta name ...
移动端事件 touchstart、touchmove、touchend
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...
关于touch事件的使用（touchStart touchMove touchEnd（不触发 android 4.0以上））滑动的使用
最近在移动端使用touch事件的时候,遇到了一些问题 ,下面是一些心得, 手机端经常会有有一些上拉加载,下拉刷新, 左右滑动删除的应用场景, 在不借助第三方插件的时候,无疑会用到touch事件,在谷歌 ...
touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...
Vue 绑定使用 touchstart touchmove touchend
今天要做一个页面div长按后触发事件,简单学习后实现如下: 先看代码: <template><div><div class="test" @touch ...
touchstart ,touchmove, touchend 页面随手指滑动
<pre style="font-family: 'Courier New'; background-color: rgb(255, 255, 255);"><s ...

移动端事件（touchstart+touchmove+touchend）

移动端事件（touchstart+touchmove+touchend）相关推荐

最新文章

热门文章