Skip to content

Javascript监听触摸事件 #49

New issue
New issue
Closed
Closed
Javascript监听触摸事件#49
Labels
notes
@Wscats

Description

@Wscats
Wscats
opened on Jul 26, 2016 · edited by Wscats
Owner

touchstart
在触摸开始时触发事件
touchend
在触摸结束时触发事件
touchmove
在触摸期间时触发事件
整个触摸其实经历了这么一个过程
touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend

Activity

Wscats

Wscats commented on Jul 27, 2016

@Wscats
Wscats
on Jul 27, 2016 · edited by Wscats
OwnerAuthor
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Wsscat滑动事件Demo</title>
    </head>
    <body>
        <article>上下左右滑动</article>
    </body>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    article{
        background-color: #000000;
        width: 100%;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #FFFFFF;
    }
    </style>
    <script>
        (function() {
            var touch = {};

            function direction(startX, changeX, startY, changeY) {
                return Math.abs(startX - changeX) >=
                    Math.abs(startY - changeY) ? (startX - changeX > 0 ? 'Left' : 'Right') : (startY - changeY > 0 ? 'Up' : 'Down')
            }

            document.getElementsByTagName('body')[0].addEventListener('touchstart', function(e) {
                touch.startY = e.targetTouches[0].pageY;
                touch.startX = e.targetTouches[0].pageX;
                //console.log("点击时的X坐标" + nStartX + "和Y坐标" + nStartY);
            });

            document.getElementsByTagName('body')[0].addEventListener('touchmove', function(e) {
                touch.whenChangY = e.changedTouches[0].pageY;
                touch.whenChangX = e.changedTouches[0].pageX;
                //console.log("滑动时的X坐标" + nWhenChangX + "和Y坐标" + nWhenChangY);
            })

            document.getElementsByTagName('body')[0].addEventListener('touchend', function(e) {
                touch.changY = e.changedTouches[0].pageY;
                touch.changX = e.changedTouches[0].pageX;
                //console.log("滑动后的X坐标" + nChangX + "和Y坐标" + nChangY);
                var swDirection = direction(touch.startX, touch.changX, touch.startY, touch.changY);
                console.log(swDirection);
            })
        })()
    </script>
</html>

上面这个DEMO实现了对上下左右滑动的监听，技巧在于对touchstart和touchend之间产生的位移进行简单的数学计算，从而判断现在时那个方向

Wscats

Wscats commented on Jul 27, 2016

@Wscats
Wscats
on Jul 27, 2016 · edited by Wscats
OwnerAuthor

先写一段原生的javascript代替jQuery或者zepto的addClass和removeClass方法

function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(obj, cls) {
    if (!hasClass(obj, cls)) obj.className += " " + cls;
}

function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        obj.className = obj.className.replace(reg, ' ');
    }
}

function toggleClass(obj, cls) {
    if (hasClass(obj, cls)) {
        removeClass(obj, cls);
    } else {
        addClass(obj, cls);
    }
}
Wscats

Wscats commented on Jul 27, 2016

@Wscats
Wscats
on Jul 27, 2016 · edited by Wscats
OwnerAuthor

利用touchstart和touchend触摸前后监听到的四个坐标分别是触摸前x，y坐标和触摸后x，y坐标，然后用数学公式进行运算得出方向

document.getElementsByTagName('body')[0].addEventListener('touchstart', function (e) {
    touch.startY = e.targetTouches[0].pageY;
    touch.startX = e.targetTouches[0].pageX;
    //console.log("点击时的X坐标" + nStartX + "和Y坐标" + nStartY);
});

document.getElementsByTagName('body')[0].addEventListener('touchmove', function (e) {
    touch.whenChangY = e.changedTouches[0].pageY;
    touch.whenChangX = e.changedTouches[0].pageX;
    //console.log("滑动时的X坐标" + nWhenChangX + "和Y坐标" + nWhenChangY);
})
document.getElementsByTagName('body')[0].addEventListener('touchend', function (e) {
    touch.changY = e.changedTouches[0].pageY;
    touch.changX = e.changedTouches[0].pageX;
    //console.log("滑动后的X坐标" + nChangX + "和Y坐标" + nChangY);
    var swDirection = direction(touch.startX, touch.changX, touch.startY, touch.changY);
})
<!DOCTYPE html>
<html lang="zh-cn" class="no-js">

    <head>
        <meta http-equiv="Content-Type">
        <meta content="text/html; charset=utf-8">
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="format-detection" content="email=no">
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
    </head>

    <body>
        <div class="page page-1-1 page-current">
            <div class="wrap">
                1
            </div>
        </div>
        <div class="page page-2-1 hide">
            <div class="wrap">
                2
            </div>
        </div>
        <div class="page page-2-2 hide">
            <div class="wrap">
                3
            </div>
        </div>
        <div class="page page-3-1 hide">
            <div class="wrap">
                4
            </div>
        </div>
    </body>
    <script>
        (function() {

            var now = {
                    row: 1,
                    col: 1
                },
                last = {
                    row: 0,
                    col: 0
                };
            const towards = {
                up: 1,
                right: 2,
                down: 3,
                left: 4
            };
            var isAnimating = false;
            var touch = {};

            function direction(startX, changeX, startY, changeY) {
                return Math.abs(startX - changeX) >=
                    Math.abs(startY - changeY) ? (startX - changeX > 0 ? 'Left' : 'Right') : (startY - changeY > 0 ? 'Up' : 'Down')
            }

            document.getElementsByTagName('body')[0].addEventListener('touchstart', function(e) {
                touch.startY = e.targetTouches[0].pageY;
                touch.startX = e.targetTouches[0].pageX;
                //console.log("点击时的X坐标" + nStartX + "和Y坐标" + nStartY);
            });

            document.getElementsByTagName('body')[0].addEventListener('touchmove', function(e) {
                touch.whenChangY = e.changedTouches[0].pageY;
                touch.whenChangX = e.changedTouches[0].pageX;
                //console.log("滑动时的X坐标" + nWhenChangX + "和Y坐标" + nWhenChangY);
            })

            document.getElementsByTagName('body')[0].addEventListener('touchend', function(e) {
                touch.changY = e.changedTouches[0].pageY;
                touch.changX = e.changedTouches[0].pageX;
                //console.log("滑动后的X坐标" + nChangX + "和Y坐标" + nChangY);
                var swDirection = direction(touch.startX, touch.changX, touch.startY, touch.changY);
                console.log(swDirection);
                //以回调的方法来写这个动作
                if(swDirection == 'Up') {
                    swipeUp(function() {
                        if(isAnimating) return;
                        last.row = now.row;
                        last.col = now.col;
                        if(now.col == 2) {
                            return;
                        } else if(last.row != 6) {
                            now.row = last.row + 1;
                            now.col = 1;
                            pageMove(towards.up);
                        }
                    })
                }

                if(swDirection == 'Down') {
                    if(isAnimating) return;
                    last.row = now.row;
                    last.col = now.col;
                    if(now.col == 2) {
                        return;
                    } else if(last.row != 1) {
                        now.row = last.row - 1;
                        now.col = 1;
                        pageMove(towards.down);
                    }
                }
                if(swDirection == 'Left') {
                    if(isAnimating) return;
                    last.row = now.row;
                    last.col = now.col;
                    if(last.row > 1 && last.row < 5 && last.col == 1) {
                        now.row = last.row;
                        now.col = 2;
                        pageMove(towards.left);
                    }
                }

                if(swDirection == 'Right') {
                    if(isAnimating) return;
                    last.row = now.row;
                    last.col = now.col;
                    if(last.row > 1 && last.row < 5 && last.col == 2) {
                        now.row = last.row;
                        now.col = 1;
                        pageMove(towards.right);
                    }

                }
            })

            function swipeUp(callback) {
                callback()
            }

            function hasClass(obj, cls) {
                return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
            }

            console.log(window.document)

            function addClass(obj, cls) {
                if(!hasClass(obj, cls)) obj.className += " " + cls;
            }

            function removeClass(obj, cls) {
                if(hasClass(obj, cls)) {
                    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                    obj.className = obj.className.replace(reg, ' ');
                }
            }

            function toggleClass(obj, cls) {
                if(hasClass(obj, cls)) {
                    removeClass(obj, cls);
                } else {
                    addClass(obj, cls);
                }
            }

            function pageMove(tw) {
                console.log(now);
                console.log(now);
                var lastPage = ".page-" + last.row + "-" + last.col,
                    nowPage = ".page-" + now.row + "-" + now.col;

                switch(tw) {
                    case towards.up:
                        outClass = 'pt-page-moveToTop';
                        inClass = 'pt-page-moveFromBottom';
                        break;
                    case towards.right:
                        outClass = 'pt-page-moveToRight';
                        inClass = 'pt-page-moveFromLeft';
                        break;
                    case towards.down:
                        outClass = 'pt-page-moveToBottom';
                        inClass = 'pt-page-moveFromTop';
                        break;
                    case towards.left:
                        outClass = 'pt-page-moveToLeft';
                        inClass = 'pt-page-moveFromRight';
                        break;
                }
                isAnimating = true;
                var $nowPage = document.querySelector(nowPage);
                var $lastPage = document.querySelector(lastPage);
                console.log($nowPage);
                removeClass($nowPage, "hide");
                addClass($lastPage, outClass)
                addClass($nowPage, inClass);

                setTimeout(function() {
                    removeClass($lastPage, 'page-current');
                    removeClass($lastPage, outClass);
                    addClass($lastPage, "hide");

                    addClass($nowPage, 'page-current');
                    removeClass($nowPage, inClass);

                    isAnimating = false;
                }, 600);
            }
        })()
    </script>
    <style>
        body {
            width: 100%;
            overflow: hidden;
        }

        .page {
            width: 100%;
            height: 100%;
            position: absolute;
            font-size: 100px;
            text-align: center;
        }

        .page .wrap {
            height: 500px;
        }

        .page-1-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }

        .page-2-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }

        .page-2-2 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }

        .page-3-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }

        .page-3-2 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }

        .page-4-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }

        .page-4-2 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }

        .page-5-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }

        .page-current {
            z-index: 1;
        }

        .hide {
            display: none;
        }

        .pt-page-moveToTop {
            -webkit-animation: moveToTop .6s ease both;
            animation: moveToTop .6s ease both;
        }

        @-webkit-keyframes moveToTop {
            from {}
            to {
                -webkit-transform: translateY(-100%);
            }
        }

        .pt-page-moveFromBottom {
            -webkit-animation: moveFromBottom .6s ease both;
            animation: moveFromBottom .6s ease both;
        }

        @-webkit-keyframes moveFromBottom {
            from {
                -webkit-transform: translateY(100%);
            }
        }

        .pt-page-moveToBottom {
            -webkit-animation: moveToBottom .6s ease both;
            animation: moveToBottom .6s ease both;
        }

        @-webkit-keyframes moveToBottom {
            from {}
            to {
                -webkit-transform: translateY(100%);
            }
        }

        .pt-page-moveFromTop {
            -webkit-animation: moveFromTop .6s ease both;
            animation: moveFromTop .6s ease both;
        }

        @-webkit-keyframes moveFromTop {
            from {
                -webkit-transform: translateY(-100%);
            }
        }

        .pt-page-moveToRight {
            -webkit-animation: moveToRight .6s ease both;
            animation: moveToRight .6s ease both;
        }

        @-webkit-keyframes moveToRight {
            from {}
            to {
                -webkit-transform: translateX(100%);
            }
        }

        .pt-page-moveToLeft {
            -webkit-animation: moveToLeft .6s ease both;
            animation: moveToLeft .6s ease both;
        }

        @-webkit-keyframes moveToLeft {
            from {}
            to {
                -webkit-transform: translateX(-100%);
            }
        }
    </style>

</html>
Wscats

Wscats commented on Jul 27, 2016

@Wscats
Wscats
on Jul 27, 2016
OwnerAuthor

这里写图片描述

Wscats
added
notes
on Jul 27, 2016
Wscats
changed the title [-]Swiper[/-] [+]Javascript监听触摸事件[/+] on Jul 30, 2016
Wscats
mentioned this on Feb 12, 2017
minza

minza commented on Nov 5, 2017

@minza
minza
on Nov 5, 2017

您好，我想请问向上滑动的操作用了回掉函数来写，有什么好处呢

Wscats
closed this as completedon Aug 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    notes

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @minza@Wscats

        Issue actions
          Javascript监听触摸事件 · Issue #49 · Wscats/articles