モバイル端末touchイベントの詳細

15423 ワード

1.ワンタッチドラッグ



    
    
    touch    
    


        window.onload = function () {
            //rem  
            document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
            let oBox = document.getElementsByClassName('box')[0];
            oBox.addEventListener('touchstart',function (e) {
                //   
                let disX = e.targetTouches[0].pageX - oBox.offsetLeft;
                let disY = e.targetTouches[0].pageY - oBox.offsetTop;
                //           
                e.preventDefault();
                e.cancelBubble = true;
                function fnMove(e) {
                    oBox.style.left = e.targetTouches[0].pageX - disX + 'px';
                    oBox.style.top = e.targetTouches[0].pageY - disY + 'px';
                }
                function fnEnd() {
                    oBox.removeEventListener('touchmove',fnMove,false);
                    oBox.removeEventListener('touchend',fnEnd,false);
                }
                oBox.addEventListener('touchmove',fnMove,false);
                oBox.addEventListener('touchend',fnEnd,false);
            },false)
        }
 

2.マルチタッチ



    
    
    touch    
    
    
        window.onload = function () {
            document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
            let oBoxs = document.getElementsByClassName('box');
            Array.from(oBoxs).forEach(oBoxs=>{
                drag(oBoxs);
            });
            
            function drag(obj) {
                obj.addEventListener('touchstart',e=>{
                    e.preventDefault();
                    e.cancelBubble = true;
                    let id = e.targetTouches[0].identifier;
                    let disX = e.targetTouches[0].pageX - obj.offsetLeft;
                    let disY = e.targetTouches[0].pageY - obj.offsetTop;
                    function fnMove(e) {
                        e.preventDefault();
                        e.cancelBubble = true;
                        obj.style.left = e.targetTouches[0].pageX - disX + 'px';
                        obj.style.top = e.targetTouches[0].pageY - disY + 'px';
                    }
                    function fnEnd(e) {
                        let found = false;
                        Array.from(e.changedTouches).forEach(touch=>{
                            if(touch.identifier == id){
                                found = true;
                            }
                        });
                        if(found){
                            obj.removeEventListener('touchmove',fnMove,false);
                            obj.removeEventListener('touchend',fnEnd,false);
                        }

                    }
                    obj.addEventListener('touchmove',fnMove,false);
                    obj.addEventListener('touchend',fnEnd,false);
                },false);
            }
        }
    


3.touch手势——旋转




    
    
    touch  -  
    
    
        window.onload = function () {
            document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
            let oBox = document.querySelector('.box');
            let old_ang = 45;
            let start_ang,ang;
            oBox.addEventListener('touchstart',e=>{
                if(e.targetTouches.length >= 2){
                    e.preventDefault();
                    e.cancelBubble = true;
                    start_ang = old_ang;
                    let disX = e.targetTouches[0].clientX - e.targetTouches[1].clientX;
                    let disY = e.targetTouches[0].clientY - e.targetTouches[1].clientY;
                    ang = Math.atan2(disY,disX)*180/Math.PI;
                    oBox.addEventListener('touchmove',fnMove,false);
                    oBox.addEventListener('touchend',fnEnd,false);
                }

                function fnMove(e) {
                    e.preventDefault();
                    e.cancelBubble = true;
                    if(e.targetTouches.length >= 2){
                        let disX = e.targetTouches[0].clientX - e.targetTouches[1].clientX;
                        let disY = e.targetTouches[0].clientY - e.targetTouches[1].clientY;
                        let ang2 = Math.atan2(disY,disX)*180/Math.PI;
                        old_ang = start_ang + ang2 - ang;
                        oBox.style.transform = `rotate(${old_ang}deg)`;
                    }
                }
                function fnEnd() {
                    oBox.removeEventListener('touchmove',fnMove,false);
                    oBox.removeEventListener('touchend',fnEnd,false);
                }

            },false);
        }
    



4.touchジェスチャー——ズーム



    
    
    touch  -  
    
    
        window.onload = function () {
            document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
            let oBox = document.querySelector('.box');
            oBox.addEventListener('touchstart',e=>{
                e.preventDefault();
                e.cancelBubble = true;
                let w = oBox.offsetWidth,h = oBox.offsetHeight;
                let dis = Math.sqrt(Math.pow(e.targetTouches[0].clientX - e.targetTouches[1].clientX,2) + Math.pow(e.targetTouches[0].clientY - e.targetTouches[1].clientY,2));
                if(e.targetTouches.length >= 2){
                    oBox.addEventListener('touchmove',fnMove,false);
                    oBox.addEventListener('touchend',fnEnd,false);
                }
                function fnMove(e) {
                    e.preventDefault();
                    e.cancelBubble = true;
                    if(e.targetTouches.length >= 2){
                        let dis2 = Math.sqrt(Math.pow(e.targetTouches[0].clientX - e.targetTouches[1].clientX,2) + Math.pow(e.targetTouches[0].clientY - e.targetTouches[1].clientY,2));

                        oBox.style.width = dis2*w/dis + 'px';
                        oBox.style.lineHeight= oBox.style.height = dis2*h/dis + 'px';
                    }
                }
                function fnEnd() {
                    oBox.removeEventListener('touchmove',fnMove,false);
                    oBox.removeEventListener('touchend',fnEnd,false);
                }



            },false);
        }
    



5.方向ロック&bannerスクロール&ドロップダウンリフレッシュ



    
    
    
        &banner  &    
    


document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px'; let banner = document.getElementById('banner'); let content = document.getElementById('content'); let load_more = document.getElementsByClassName('load_more')[0]; let banner_ul = banner.children[0]; let banner_left = 0; let content_top = 0; function loadData(fn) { $.ajax({ url: 'data.txt?t=' + Math.random(), success(str){ let arr = str.split('
'); $('ol').html(''); arr.forEach(s=>{ $(`<li>${s}</li>`).appendTo('ol'); }); fn&&fn(); }, error(){ alert(' '); } }) } loadData(); banner.addEventListener('touchstart',function (e) { let startX = e.targetTouches[0].clientX; // X let startY = e.targetTouches[0].clientY; // Y let dir = ''; // let disX = startX - banner_left; let disY = startY - content_top; banner_ul.style.transition = ''; content.style.transition = ''; function fnMove(e) { let x = e.targetTouches[0].clientX; let y = e.targetTouches[0].clientY; // 5 if(!dir){ if(Math.abs(x- startX) >= 5){ dir = 'x'; }else if(Math.abs(y - startY) >= 5){ dir = 'y'; } }else{ if(dir === 'x'){ // banner banner_left = x - disX; banner_ul.style.transform = `translateX(${banner_left}px)`; }else if(dir === 'y'){ // content_top = y - disY; if(content_top > 0){ content.style.transform = `translateY(${content_top/3}px)`; if(content_top >= 100){ load_more.innerHTML = ' '; }else{ load_more.innerHTML = ' '; } }else{ content.style.transform = `translateY(${content_top}px)`; } } } } function fnEnd() { banner.removeEventListener('touchmove',fnMove,false); banner.removeEventListener('touchend',fnEnd,false); if(dir === 'x'){ // banner let n = Math.round(-banner_left/banner.offsetWidth); if(n < 0){ n = 0; }else if(n >= banner_ul.children.length){ n = banner_ul.children.length - 1; } banner_left = -n * banner.offsetWidth; banner_ul.style.transition = '0.7s all ease'; banner_ul.style.transform = `translateX(${banner_left}px)`; }else if(dir === 'y'){ // if(content_top >= 100){ content_top = 30; load_more.innerHTML = ' ...'; loadData(function () { load_more.innerHTML = ' '; content_top = 0; content.style.transition = '0.7s all ease'; content.style.transform = `translateY(${content_top}px)`; }) }else{ content_top = 0; } content.style.transition = '0.7s all ease'; content.style.transform = `translateY(${content_top}px)`; } } banner.addEventListener('touchmove',fnMove,false); banner.addEventListener('touchend',fnEnd,false); },false);

6.ダブルクリック+長押し



    
    
      +  
    






    document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
    let btn = document.getElementById('btn');
    let t = 0;
    let lastTap = 0;
    let timer = null;
    btn.addEventListener('touchstart',function () {
        t = Date.now();
        timer = setTimeout(function () {
             console.log('   ');
        },1500);
    },false);

    btn.addEventListener('touchend',function () {
        clearTimeout(timer);
        if(Date.now() - t <= 700){
            console.log('tap');
            if(Date.now() - lastTap <= 300){
                console.log('double tap');
            }
            lastTap = Date.now();
        }else{
            console.log('long tap');
        }
    },false);