H5中的touch事件

時間 2019-11-17

標籤 h5 touch 事件简体版

原文原文鏈接

touch中共有touchstart、touchmove和touchend三個事件；html

touchstart：觸摸開始的時候觸發android

touchmove：手指在屏幕上滑動的時候觸發session

touchend：觸摸結束的時候觸發spa

而且每一個觸摸事件都包括了三個觸摸列表，每一個列表裏包含了對應的一系列觸摸點（用來實現多點觸控）：code

touches：當前位於屏幕上的全部手指的列表；htm

targetTouches：位於當前DOM元素上的手指列表；blog

changedTouches：涉及當前事件手指的列表。事件

每一個觸摸點由包含了以下觸摸信息（經常使用）：rem

dentifier：一個數值，惟一標識觸摸會話（touch session）中的當前手指。通常爲從0開始的流水號（android4.1，uc）get

target：DOM元素，是動做所針對的目標。

pageX/pageY/clientX/clientY/screenX/screenY：一個數值，動做在屏幕上發生的位置（page包含滾動距離,client不包含滾動距離，screen則以屏幕爲基準）。

下面是我用幾種方法對touch事件的應用：

第一種方法：

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 oParent = document.getElementById("prog");
            var oDiv = document.getElementById("div");
            var oDiv1 = document.getElementById("div1")
            var touch = event.targetTouches[0];

            switch (event.type) {
                case "touchstart":

                    break;
                case "touchend":

                    break;
                case "touchmove":
                    event.preventDefault();
                    var l = touch.clientX-oParent.offsetLeft ;
                    console.log(l)
                    if (l <= 0) {
                        l = 0;
                    } else if (l >= oParent.offsetWidth-oDiv.offsetWidth) {
                        l = oParent.offsetWidth - oDiv.offsetWidth;
                    }
                    var oWidth = (l / oParent.offsetWidth) * 800;
                    oDiv.style.left = l + "px"
                    oDiv1.style.width = oWidth + 25 + "px";
                    break;
            }

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

第二種方法：

window.onload=function(){
        var  btn=document.getElementById("div");
        var  bg=document.getElementById("div1");
        var oP=document.getElementById("prog");
        var W=oP.offsetWidth;
        console.log(W)
        var ox,ex,endx;
        btn.addEventListener("touchstart",function(e){
            e.preventDefault();
            ox=e.touches[0].clientX;
            startX=btn.offsetLeft+3;
            //console.log(startX);
        },false);
        btn.addEventListener("touchmove",function(e){
            e.preventDefault;
            ex=e.changedTouches[0].clientX;
            endx=ex-ox+startX;
            //console.log(endx)
            if(endx<=0){
                endx=0;
            }else if(endx>=W-btn.offsetWidth){
                endx=W-btn.offsetWidth;
            }
            var oWidth=(endx/W)*W;
            console.log(oWidth)
            btn.style.left=endx+"px";
            bg.style.width=oWidth+45+"px";

        },false)
        btn.addEventListener("touchend",function(){
            btn.removeEventListener("touchmove");
            btn.removeEventListener("tocched");
        },false)
    }