js多點觸控touch事件

阿新 • • 發佈：2019-01-14

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1 , maximum-scale=1 , user-scalable=no">
<style>
body{background-color:#222;}
.spot{position:absolute; width:70px; height:70px; border-radius:35px; box-shadow:0px 0px 40px #fff; background-color:#fff; opacity:.7;}
</style>
</head>
<body>
<script>
    var spots = {} , touches , timer;

    document.addEventListener('touchstart',function(e){
        e.preventDefault();
        [].forEach.call(e.targetTouches,function(touch){
            //對每一根觸控在螢幕上的手指都生成一個元素，並且用touch.identifier作為該元素的唯一標識，觸控結束後清除引用的元素

            if(spots[touch.identifier]){
                return;
            }
            var spot = spots[touch.identifier] = document.createElement('div');
            spot.classList.add('spot');
            spot.style.top = touch.pageY - 35;
            spot.style.left = touch.pageX - 35;
            document.body.appendChild(spot);
        })
        timer = setInterval(function() {
            renderTouches(touches);
        },16);
    },false);

    document.addEventListener('touchmove',function(e){
        e.preventDefault();
        touches = e.touches;
    });

    function renderTouches(touches){
        if(!touches){
            return;
        };
        [].forEach.call(touches,function(touch){
            var spot = spots[touch.identifier];
            if(spot){
                spot.style.top = touch.pageY - 35;
                spot.style.left = touch.pageX - 35;
            }
        })
    }

    document.addEventListener('touchend',function(e){
        e.preventDefault();
        [].forEach.call(e.changedTouches,function(touch){
            var spot = spots[touch.identifier];
            if(spot){
                document.body.removeChild(spot);
                delete spots[touch.indentifier];
            }
        })
        if(e.changedTouches.length === 0){
            clearInterval(timer);
        }
    })

    //touches：表示當前位於螢幕上的所有手指動作的列表，是一個TouchList型別的物件，TouchList是一個類陣列物件，它裡面裝的是Touch物件
    //targetTouches：位於當前DOM元素上的手指動作的TouchList列表
    //changedTouches：涉當前事件的手指動作的列表，例如，在一個touchend事件中，這將是移開的那根手指
    //touchstart等事件在觸發時是允許多個手指同時觸控式螢幕幕的，每一根手指都會產生一個Touch物件，包含以下屬性：identifier一個數字，用於唯一標識觸控會話中的當前手指，target作為動作目標的DOM元素，及座標相關clientX/Y等

</script>
</body>
</html>

js多點觸控touch事件

js多點觸控touch事件

C WinForm 開發Windows7多點觸控（Multi-Touch）應用程式

Android事件傳遞、多點觸控及滑動衝突的處理

C WinForm 開發Windows7多點觸控（Multi-Touch）應用程序

多點觸控顯示坐標

基於Visual C 2010開發Windows7應用多點觸控圖片處理應用程式 1 同時處理多張圖片

基於Visual C 2010與windows SDK fo windows7開發Windows 7的多點觸控特性應用

Appium多點觸控-MultiAction對頁面進行放大或縮小

安卓自定義View進階-多點觸控詳解

雷達多點觸控牆面地面大屏互動投影tuio協議雷達檢測互動程式軟體

如何利用RPLIDAR A2進行多點觸控應用

多點觸控技術被廣泛應用於段碼屏領域

android如何怎麼禁止多點觸控

[小白求助]Appium自動化測試—多點觸控操作地圖縮放報錯

cocos2d-x 多點觸控總結

Android多點觸控技術，實現對圖片的放大縮小平移，慣性滑動等功能

android ImageView 手勢縮放，雙擊放大，自由滑動，多點觸控，慣性滑動

多點觸控互動可視三維電子沙盤地理資訊系統

android 自定義ImageView實現圖片手勢滑動，多點觸控放大縮小效果

Android-防止使用者快速點選和多點觸控

js多點觸控touch事件

相關推薦