javascript - 获取触摸事件的长度

Question

如何在javasscript中获取touchstart和touchend之间的时间。

    // define startTime variable
    var startTime = 0;

    function initi() {
        console.log('init');
        // Get a reference to our touch-sensitive element
        var touchzone = document.getElementById("myCanvas");
        // Add an event handler for the touchstart event
        touchzone.addEventListener("mousedown", startTouch, false);
        // You need mouseup to capture the stop event                          
        touchzone.addEventListener("mouseup", stopTouch, false);
    }

    function startTouch(event) {
        // You can access the event here too..
        // But for demo I will only get the current Time

        startTime = new Date().getTime();
    }

    function stopTouch(event) {
        // Get a reference to our coordinates div
        var can = document.getElementById("myCanvas");
        // Write the coordinates of the touch to the div
        if (event.pageX < x * 100 && event.pageY > y * 10) {
            // Calculate the duration, only if needed
            var duration = new Date().getTime() - startTime;

            bally -= 0.001 * duration; // use duration
        }

        // I hope bally if defined in the outer scope somewhere ;)                    
        console.log(event, x, bally);
        draw();
    }

touchstart 和 touchend 之间的时间越长，球应该移动得越多，但是我如何获得 touchevent 的时间/长度？

Answer 1

var startTime = 0;
function start() {
   startTime = new Date().getTime();
}

function stop() {
  var duration = (new Date().getTime() - startTime);
  growBar(duration);
}

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var ms = document.getElementById('ms');
clickEle.onmousedown = start;
clickEle.onmouseup = stop;

function growBar(timerCount) {
    ms.innerHTML = timerCount;
    timerEle.setAttribute("style", "width:" + timerCount + "px;");
}

.bar {
  height: 10px;
  width: 100%;
  background: black;
}
.timer {
  width: 0;
  height: 100%;
  background: red;
}

<button id="button-id">Click This!</button>
<div><strong id="ms"></strong> ms</div>
<div class="bar">
  <div class="timer"></div>
</div>