Question

手机端如何用JS实现触屏

想做一个页面，需要可以触摸滑动导航，就是导航超出的部分隐藏，手指滑动的时候，隐藏的部分出来。如何用HTML5或者JS实现这个效果。分不多了，请大神帮忙。

Answer 1

//html5 新增 touch 事件
//禁用手机默认的触屏滚动行为
document.addEventListener('touchmove', function(event) {
	event.preventDefault();
}, false);
//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;


	} 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坐标


//document.getElementById("version").innerHTML = "原:"+startY+"   "+"现:"+y;
		//判断滑动方向
		
		if (y - startY > 100) {
			swipeDown();
		} else if(y - startY < -100){
			swipeUp();
		}
	} catch (e) {
		alert('touchMoveFunc：' + e.message);
	}
}

//touchend事件
function touchEndFunc(evt) {
	try {
		//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等


	} 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);
	}
}

Answer 2

手机端的触摸事件为touchstart，touchmove，touchend。如果使用第三方类库会封装更多的方法，比如，jQuery-mobile的tap，taphold等

Answer 3

在实现触屏中，必须采用js的addEventListener，接着加上touchstart,touchmove,touchend来实现触屏效果。

e.preventDefault（），假设不写这一句，在触屏的时候，页面就会滑动，所以它的作用是巨大的。

Answer 4

您可以了解一下jqm
在手机端实现触屏,加载,或者自适应都不错