aresli.com

效果很简单，单根手指在屏幕上点击后页面上出现一个红色的圆形图案，手指在屏幕上滑动，圆形图案跟随手指移动而移动，手指离开屏幕，圆形图案消失。

功能正好一一对应手指的三种状态：touchstart，touch move，touchend

代码如下：

touchstart:

function touchStart(event) {
    event.preventDefault(); // 这个方法阻止事件的默认动作，触摸事件的默认动作是滚屏，我们不想屏幕动来动去的，所以先调用一下这个函数。
    if (spirit || ! event.originalEvent.changedTouches.length) { // 是否已经有了一个spirit 或者 是否已经有了一根手指放在了屏幕上
        return;
    }
    startX = event.originalEvent.changedTouches[0].pageX;
    startY = event.originalEvent.changedTouches[0].pageY;
    spirit = $("<div></div>");
    spirit.addClass("spirit");
    spirit.css({"left":startX, "top":startY});
    $body.append(spirit);
}

touchmove:

function touchMove(event) {
	event.preventDefault();
    if (!spirit || ! event.originalEvent.changedTouches.length) {
        return;
    }	
	endX = event.originalEvent.changedTouches[0].pageX - startX;
	endY = event.originalEvent.changedTouches[0].pageY - startY;
    spirit.css("webkit-transform", "translate("+endX+"px, "+endY+"px)");
}

touchend:

function touchEnd(event) {
    if (!spirit) {
        return;
    }
    spirit.remove();
    spirit = null;
}

实际的效果可以用移动设备访问这个地址：http://aresli.com/demo/touch-event/touch3.html

原生JS写法的例子在这里：http://aresli.com/demo/touch-event/touch4.html