touchstart, touchmove, touchend

时间 2019-11-29

标签 touchstart touchmove touchend 繁體版

原文原文链接

移动端基础事件介绍

touchstart //手指触碰屏幕（单指按下）

touchmove //手指在屏幕上滑动

touchend //手指离开屏幕

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的惟一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触目的DOM节点目标。

function load (){  

    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":  
                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
            case "touchend":  
                oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";  
                break;  
            case "touchmove":  
                event.preventDefault();  
                oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
        }  

    }  
}  
window.addEventListener('load',load, false);

例子：javascript

图片左右滑动css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 防止屏幕进行伸缩 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body,html,div,ul,li{
            padding:0;
            margin:0;
        }
        #pic{
            width:100%;
            height: 300px;
            overflow: hidden;
        }
        #pic #img{
            width:400%;
            height: 300px;
            position: relative;
        }
        #img div{
            width:25%;
            height: 300px;
            float: left;
            background-color: orange;
            text-align: center;
            line-height: 300px;
            color: white;
        }
        #circle{
            width:72px;
            height: 40px;
            margin:0 auto;
            position: relative;
            z-index: 2;
            top:-40px;
        }
        #circle ul li{
            width:8px;
            height: 8px;
            background-color: white;
            list-style: none;
            float: left;
            margin:15px 5px 0 5px;
        }
        #circle ul .active{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="pic">
        <div id="img">
            <div>1111111</div>
            <div>2222222</div>
            <div>3333333</div>
            <div>4444444</div>
        </div>
    </div>
    <div id="circle">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var startPos = {};//开始位置
            var endPos = {};//结束位置
            var scrollDirection;//滚动方向
            var timr;//定时器，后面控制速度会使用
            var touch;//记录触碰节点
            var index = 0;//记录滑动到第几张图片
            var oImg = document.getElementById("img");
            var oCircle = document.getElementById("circle");
            var aCircle = oCircle.getElementsByTagName("li");
            var ImgWidth;//图片宽度
            var speed; //滑动速度
            var target;//目标
            function slide(index){
                for(var i=0;i<aCircle.length;i++){
                    aCircle[i].className = '';
                }
                aCircle[index].className = 'active';
                ImgWidth = parseInt(oImg.offsetWidth / aCircle.length);
                target = -ImgWidth * index;
                timer = setInterval(function(){
                    speed = speed > 0 ? Math.floor((target-oImg.offsetLeft) / 5) : Math.ceil((target-oImg.offsetLeft) / 5);
                    if(target == oImg.offsetLeft){
                        clearInterval(timer);
                    }else{
                        oImg.style.left = oImg.offsetLeft + speed +'px';
                    }
                },30);
            }
            oImg.ontouchstart = function(event){
                touch = event.targetTouches[0];//取得第一个touch的坐标值
                startPos = {x:touch.pageX,y:touch.pageY}
                scrollDirection = 0;
            }
            oImg.ontouchmove = function(event){
                // 若是有多个地方滑动，咱们就不发生这个事件
                if(event.targetTouches.length > 1){
                    return
                }
                touch = event.targetTouches[0];
                endPos = {x:touch.pageX,y:touch.pageY}
                // 判断出滑动方向，向右为1，向左为-1
                scrollDirection = touch.pageX-startPos.x > 0 ? 1 : -1;
            }
            oImg.ontouchend = function(){
                if(scrollDirection == 1){
                    if(index >= 1 && index <= aCircle.length-1){
                        index--;
                        slide(index);
                    }else{
                        return
                    }
                }else if(scrollDirection == -1){
                    if(index >=0 && index <= aCircle.length-2){
                        index++;
                        slide(index);
                    }else{
                        return
                    }
                }
            }
            for(var i = 0;i < aCircle.length; i++){
                aCircle[i].index = i;
                aCircle[i].onclick = function(){
                    slide(this.index);
                }
            }
        }
    </script>
</body>
</html>

参考：https://blog.csdn.net/m0_37568521/article/details/77836756html

https://blog.csdn.net/yy493004893/article/details/78226044java