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加上高度的一半。
源码如下:
& lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,,,& lt; title> touchExample
,,,& lt; meta name="视窗",内容=翱矶?设备宽度,user-scalable=不,初始=1.0,最小规模=1.0,最大范围=1.0”比;
,,,& lt; script type=" text/javascript, src=" http://code.jquery.com/jquery-latest.js "祝辞& lt;/script>,
,,,& lt; style>
,,,,,,,# touchDiv {
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,宽度:,50 px;
,,,,,,,,,,,身高:,50 px;
,,,,,,,,,,,:,20 px;
,,,,,,,,,,,左:,20 px;
,,,,,,,,,,,text-align:,中心;
,,,,,,,,,,,行高:,50 px;
,,,,,,,,,,,颜色:白色;
,,,,,,,,,,,这个特性:,50%;
,,,,,,,,,,,,背景颜色:红色;
,,,,,,,},,,,& lt;/style>
& lt;/head>
& lt; body>
,,,& lt; div id=皌ouchDiv”在点我& lt;/div>
,,,& lt; script>,,,,,,,, var touchDiv =, . getelementbyid (“touchDiv”),,,,,,,,, var x, y;
,,,,,,,touchDiv.addEventListener (“touchstart”, canDrag);
,,,,,,,touchDiv.addEventListener (“touchmove”,拖动);
,,,,,,,touchDiv.addEventListener (“touchend”, nodrag);
,,,,,,,function canDrag (e), {
,,,,,,,,,,,console.log(“上帝开始”);
,,,,,,,}
,,,,,,,function drag (e), {
,,,,,,,,,,,(“# touchDiv”)美元。css(“左”,e.touches [0] .pageX-25);
,,,,,,,,,,,(“# touchDiv”)美元。css(“顶级”,e.touches [0] .pageY-25);
,,,,,,,}
,,,,,,,function nodrag (), {
,,,,,,,,,,,console.log(“上帝结束”);
,,,,,,,},,,,& lt;/script>
& lt;/body>
& lt;/html>
,
这个实例就是下拉刷新功能的实现,效果如下:
,
源码如下:
& lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,,,& lt; title>下拉刷新& lt;/title>
,,,& lt; meta name="视窗",内容=翱矶?设备宽度,user-scalable=不,初始=1.0,最小规模=1.0,最大范围=1.0”比;
,,,& lt; style>
,,,,,,,* {
,,,,,,,,,,,保证金:0;
,,,,,,,,,,,填充:,0;
,,,,,,,,,,,字体大小:15 px;
,,,,,,,}
,,,,,,,.header {
,,,,,,,,,,,身高:,50 px;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null移动端实现下拉刷新
