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

相關標籤/搜索

touchstart+touchmove+touchend

touchmove

touchend

touchstart

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。