手势事件
| 手势事件 | 事件相详解 |
|---|---|
| touchstart | 当手指接触屏幕时触发 |
| touchmove | 当已经接触屏幕的手指开始移动的时候触发 |
| touchend | 当手指离开屏幕时触发 |
手势事件实例
-
示例代码
window.addEventListener('load', function () {
document.addEventListener('touchstart', function (e) {
console.log("触发事件：touchstart");
})
document.addEventListener('touchend', function () {
console.log("触发事件：touchend");
});
document.addEventListener('touchmove', function () {
console.log("触发事件：touchmove");
});
});
-
示例效果
手势事件的应用
可以使用
touchstart或者touchend事件，来代替click事件，用来触发移动端的点击事件。可以使用
touchmove事件代替scroll事件，来检测移动端的滑动事件。并且可以通过touchmove事件，来是实施获取滚动条滚动的高度。示例代码如下：
document.addEventListener('touchmove', function () {
console.log(getScrollTop());
});
function getScrollTop() {
var scroll_top = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scroll_top = document.documentElement.scrollTop;
}
else if (document.body) {
scroll_top = document.body.scrollTop;
}
return scroll_top;
}
- 效果如图所示：
