原生js——移动端的手势事件

手势事件

手势事件实例

• 示例代码

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

• 效果如图所示：