js的左右滑动触屏事件,主要有三个事件:
touchstart,touchmove,touchend。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。
touchstart:
在触摸开始时触发事件
touchend:
在触摸结束时触发事件
touchmove:
这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在 touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发。
这三个事件都都有一个 timeStamp 的属性,查看 timeStamp 属性,可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。
PS:1.touch事件跟click事件是不会被同时触发的。现在的移动设备做的比较好,已经把这个问题完美的避免掉了。
下面是二段代码实例:
document.getElementsByTagName_r('body')[0].addEventListener('touchstart', function (e) {
nStartY = e.targetTouches[0].pageY;
nStartX = e.targetTouches[0].pageX;
});
document.getElementsByTagName_r('body')[0].addEventListener('touchend', function (e) {
nChangY = e.changedTouches[0].pageY;
nChangX = e.changedTouches[0].pageX;
});
//全局变量,触摸开始位置
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 + ')';
console.log(text);
}
catch (e) {
alert('touchSatrtFunc:' + e.message);
}
}
//touchend事件
function touchEndFunc(evt){
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
nChangX = evt.changedTouches[0].pageX;
nChangY = evt.changedTouches[0].pageY;
if(nChangX - startX > 10){
slideButton("left");
}else if(nChangX - startX < -10){
slideButton("right");
}
}
catch (e) {
alert('touchEndFunc:' + 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 += '<br/>左右滑动';
}
if (y - startY != 0) {
text += '<br/>上下滑动';
}
console.log(text);
}
catch (e) {
alert('touchMoveFunc:' + e.message);
}
}
//绑定事件
function bindEvent(obj){
if(obj){
obj.addEventListener('touchstart', touchSatrtFunc, false);
obj.addEventListener('touchmove', touchMoveFunc, false);
obj.addEventListener('touchend', touchEndFunc, false);
}
// document.addEventListener('touchstart', touchSatrtFunc, false);
// document.addEventListener('touchmove', touchMoveFunc, false);
// document.addEventListener('touchend', touchEndFunc, false);
}
bindEvent(document.getElementById("bodyButton"));
//判断是否支持触摸事件
function isTouchDevice(){
try {
document.createEvent("TouchEvent");
console.log("支持TouchEvent事件!" + navigator.appVersion);
bindEvent(); //绑定事件
}
catch (e) {
alert(navigator.appVersion + "不支持TouchEvent事件!" + e.message);
}
}
isTouchDevice();