移動端touch事件

touch事件是移動端特有的，pc端不支持

touchstart：開始觸摸事件
touchmove：手指滑動事件（持續觸發）
touchstend：觸摸結束事件
touchcancal：觸摸意外中斷事件（手機中途來電？）

1.基本用法

var div = docuemnt.querySelector('div');
div.addEventListener('touchstart',function(){
    //只觸發一次
    console.log("touchstart");
})
div.addEventListener('touchmove',function(){
    //持續觸發
    console.log("touchmove");
})
div.addEventListener('touchend',function(){
    //只觸發一次
    console.log("touchend");
})

 

2.touchEvent事件對象

var div = docuemnt.querySelector('div');
div.addEventListener('touchstart',function(e){
    //打印
    console.log(e.touches);
    console.log(e.targetTouches);
    console.log(e.changeTouches);
})

 

Touch 屬性

事件對應的三個列表雖然名字不一樣，但是它們里面裝的東西都是差不多的，包含了當前事件的一些相關信息，比如：一些坐標信息。

TouchList {0: Touch, length: 1} length:1 0:Touch clientX:65 // 觸摸點在瀏覽器窗口中的橫坐標 clientY:18 // 觸摸點在瀏覽器窗口中的縱坐標 force:1 // 觸摸點壓力大小 identifier:0 // 觸摸點唯一標識（ID） pageX:65 // 觸摸點在頁面中的橫坐標 pageY:18 // 觸摸點在頁面中的縱坐標 radiusX:11.5 // 觸摸點橢圓的水平半徑 radiusY:11.5 // 觸摸點橢圓的垂直半徑 rotationAngle:0 // 旋轉角度 screenX:560 // 觸摸點在屏幕中的橫坐標 screenY:175 // 觸摸點在屏幕中的縱坐標 target:div#touchLog 觸摸目標 __proto__:Touch __proto__:TouchList

https://www.cnblogs.com/cangqinglang/p/8794621.html