移动设备、手机浏览器Javascript滑动事件代码
以下经过本人测试成功。
测试平台：三星S5830I
操作系统：Android 2.3.6
浏览器：UC浏览器
HTML标准：HTML5
测试了三个事件：touchstart、touchmove 和touchend，并获取了触摸时触点在页面上的坐标，根据坐标进行了左右滑动、上下滑动判断。
TouchEvent测试
TouchEvent测试
未触发事件！
测试条目1
测试条目2
测试条目3
测试条目4
测试条目5
测试条目6
测试条目7
测试条目8
测试条目9
测试条目10
测试条目11
测试条目12
测试条目13
测试条目14
测试条目15
测试条目16
测试条目17
测试条目18
测试条目19
测试条目20
<script type="text/javascript">
//全局变量，触摸开始位置
var startX = 0, startY = 0;
//touchstart事件
function touchSatrtFunc(evt) {
try
{
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchSatrtFunc：' + e.message);
}
}
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
try
{
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
//判断滑动方向
if (x - startX != 0) {
text += '
左右滑动';
}
if (y - startY != 0) {
text += '
上下滑动';
}
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchMoveFunc：' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var text = 'TouchEnd事件触发';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchEndFunc：' + e.message);
}
}
//绑定事件
function bindEvent() {
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
//判断是否支持触摸事件
function isTouchDevice() {
document.getElementById("version").innerHTML = navigator.appVersion;
try {
document.createEvent("TouchEvent");
alert("支持TouchEvent事件！");
bindEvent(); //绑定事件
}
catch (e) {
alert("不支持TouchEvent事件！" + e.message);
}
}
window.onload = isTouchDevice;
《script》
下面是jQuery Mobile实现上下滑动的方式：
jQueryMobile左右滑动事件：swipe（水平滑动30px以上时触发）、swipeLeft（向左滑）、swipeRight（向右滑）
jQueryMobile垂直滑动事件：scrollstart（上下滚动）、scrollend（滚动停止）
jQuery Mobile触摸点击事件：tap（快速触碰）、taphold（触碰并保持750ms以上触发）
Ajax测试
<script src="http://upload.server110.com/image/20131222/1UQ95Y8-0.jpg">《script》
<script src="http://upload.server110.com/image/20131222/1UQ9CO-1.jpg">《script》
