js 觸摸事件

var jc = 0;
document.addEventListener('touchstart', function(event) {
    jc=0;
}, false);
document.addEventListener('touchmove', function(event) {
    jc++;
}, false);
document.addEventListener('touchend', function(event) {
    console.log(jc);
    if(jc>10)
    {
        alert("測試");
    }
    event.preventDefault(); //阻止click事件的執行
}, false);

document.addEventListener('click', function(event) {
  console.log('click');
}, false);

觸摸事件
目前Safari 只支持TouchEvent(觸摸事件)和GestureEvent(手勢事件)
TouchEvent
{
    Touchstart
    Touchmove
    Touchend
    Touchcance
}
單擊會觸發
    1.TouchStart (開始)
    2.TouchEnd (結束)
    3.Click (點擊)
左滑動和右滑動
    1.TouchStart (開始)
    2.TouchMove(移動) 觸發事件次數(++)
3.TouchEnd (結束)

出處：https://www.cnblogs.com/strick/p/5155042.html

 

  var jc = 0;
        var begin_x = 0; //開始坐標
        var end_x = 0; //結束坐標
        document.addEventListener('touchstart', function (event) {
            begin_x = event.touches[0].clientX;
            jc = 0;
        }, false);
        document.addEventListener('touchmove', function (event) {
            jc++;
            end_x = event.touches[0].clientX;
        }, false);
        document.addEventListener('touchend', function (event) {
            //var t = event.touches[0].screenX; //結束時候沒有 touches數組長度為0;
            //console.log("end");
            //console.log(t);
            //console.log(jc);
            if (jc > 7) {
                if (begin_x > end_x) {
                    alert("左滑動");
                } else {
                    alert("右滑動");
                }
                //window.location = "/home/Seeview";
            }
            event.preventDefault(); //阻止click事件的執行
        }, false);

    //event.preventDefault(); //阻止click事件的執行   這個事件  會阻止移動端的單擊事件