要实现该效果需要用到三个H5中的新增事件：touchstart、touchmove和touchend。
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
下面写个小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
function load (){
var startY = ''; // 触摸开始时的纵坐标
var moveY = ''; // 触摸移动中的纵坐标
// var endY = ''; // 触摸结束的纵坐标
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event) {
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
startY = event.touches[0].clientY;
break;
// case "touchend":
// break;
case "touchmove":
event.preventDefault();
moveY = event.touches[0].clientY;
if (moveY > startY) {
alert('下划');
} else {
alert('上划');
}
break;
}
}
}
window.addEventListener('load',load, false);
</script>
</head>
<body>
<div id="inp"></div>
</body>
</html>其实就是判断纵向的移动方向，Y变大向下，Y减小向上。
可以用JS先判断终端是否支持触摸事件：
/**
* 触摸事件优先
* @return {boolean}
*/
function clickEvent() {
return ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
}
扫一扫
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
