介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> touchExample
& lt;元名称=皏iewport"内容=翱矶?设备宽度,user-scalable=不,初始=1.0,最小规模=1.0,最大范围=1.0,比;
& lt;脚本类型=拔谋?javascript"脚本https://www.yisu.com/zixun/src=" http://code.jquery.com/jquery-latest.js ">
<时尚>
# touchDiv {
位置:绝对的;
宽度:50 px;
高度:50 px;
上图:20 px;
左:20 px;
text-align:中心;
行高:50 px;
颜色:白色;
这个特性:50%;
背景颜色:红色;
}>
今天就跟大家聊聊有关Android开发中如何使用触摸实现移动端的下拉刷新功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
1。touchstart:只要将手指放在了屏幕上(而不管是几只),都会触发touchstart事件。
2。touchmove:当我们用手指在屏幕上滑动时,这个事件会被连续触发。如果我们不希望页面随之滑动,我们可以使用事件的preventDefault来阻止这个默认行为。
3。touchend:当手指滑动后离开屏幕,这时就触发了touchend事件。
4。touchcancel:系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用。
,1. 触摸,这是一个类数组对象,包含了所有的手指信息,如果只有一个手指,那么我们用触摸[0]来表示。
,2. targetTouches。手指在目标区域的手指信息。
,,,,3.changedTouches:最近一次触发该事件的手指信息。
,,,,4. touchend时,触摸与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息。
先看效果图:
它的实现原理非常简单,就是将红色圆形的位置属性设为绝对的,然后,当我们滑动它时,就触发了touchmove事件,将其左和上设置为事件的pageX和pageY即可,为保证触发中心与圆心在同一位置,只需将pageX加上宽度的一半,pageY加上高度的一半。
源码如下:
点我
<>脚本
var touchDiv=. getelementbyid (“touchDiv”);
var x, y;
touchDiv.addEventListener (“touchstart”, canDrag);
touchDiv.addEventListener (“touchmove”,拖动);
touchDiv.addEventListener (“touchend”, nodrag);
函数canDrag (e) {
console.log(“上帝开始”);
}
函数阻力(e) {
$ (" # touchDiv ") . css(“左”,e.touches [0] .pageX-25);
$ (" # touchDiv ") . css(“顶级”,e.touches [0] .pageY-25);
}
函数nodrag () {
console.log(“上帝结束”);
}>