JS判断手机纵向滑动

来源：互联网发布：读书笔记本软件编辑：程序博客网时间：2024/06/09 20:08

要实现该效果需要用到三个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';}

1 0