获取触摸事件的长度

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 的 time/length？

Answer 1

您可以开始一个 Javascript 间隔，任意毫秒数（取决于 "smoothness" 需要）。请参阅下面的内容，模仿您可以执行的操作，仅使用 mousedown 和 mouseup 事件。

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var COUNTER_INCREMENT = 10; // In milliseconds
var timerCount = 0;
var timer = null;

clickEle.onmousedown = startTimer;
clickEle.onmouseup = stopTimer;

function startTimer() {
  timer = setInterval(incrementTimer, COUNTER_INCREMENT);
}

function incrementTimer() {
  timerCount += COUNTER_INCREMENT;

  // For Demo purposes only
  timerEle.innerHTML = timerCount;
}

function stopTimer() {
  clearInterval(timer);
  timerCount = 0;
}

<button>Click This!</button>
<p>
  <strong>How Long Was the Mouse Held Down for?</strong>
  <span class="timer">0</span> milliseconds
</p>

或者您可以使用更优化的 requestAnimationFrame，但其可用性取决于您支持的浏览器。 https://css-tricks.com/using-requestanimationframe/

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var COUNTER_INCREMENT = 10; // In milliseconds
var startTime = 0;
var timerCount = 0;
var timer = null;

clickEle.onmousedown = startTimer;
clickEle.onmouseup = stopTimer;

function startTimer() {
  timer = window.requestAnimationFrame(incrementTimer);
  startTime = new Date();
}

function incrementTimer() {
  var newTimerCount = new Date() - startTime;

  // Update the DOM sparingly
  if(newTimerCount - timerCount > COUNTER_INCREMENT) {
    // For Demo purposes only
    timerEle.innerHTML = timerCount = newTimerCount;
  }
  timer = window.requestAnimationFrame(incrementTimer)
}

function stopTimer() {
  cancelAnimationFrame(timer);
  timerCount = 0;
}

<button>Click This!</button>
<p>
  <strong>How Long Was the Mouse Held Down for?</strong>
  <span class="timer">0</span> milliseconds
</p>

Answer 2

您必须在 "outer scope" 中的某处定义 startTime 变量，两个函数都可以访问该变量。当您调用第一个函数时，它只会更改其值，第二个函数也可以访问该变量；）

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

function two() {
  var duration = new Date().getTime() - startime;
  console.log(duration + 'ms between one() and two()');
}

var btn = document.getElementById('some-btn-id');
btn.onmousedown = one;
btn.onmouseup = two;

Answer 3

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>

Answer 4

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var msEle = document.getElementById('ms');
var COUNTER_INCREMENT = 1; // In milliseconds
var timerCount = 0;
var timer = null;

clickEle.onmousedown = startTimer;
clickEle.onmouseup = stopTimer;

var ms = 0;
function startTimer() {
  ms = new Date().getTime();
  timer = setInterval(incrementTimer, COUNTER_INCREMENT);
}

function incrementTimer() {
  timerCount += COUNTER_INCREMENT;

  // For Demo purposes only
  timerEle.innerHTML = timerCount;
}

function stopTimer() {
  clearInterval(timer);
  timerCount = 0;
  msEle.innerHTML = new Date().getTime() - ms;
}

<button>Click This!</button>
<p>
  <strong>How Long Was the Mouse Held Down for?</strong>
  <span class="timer">0</span> milliseconds
</p>
<p><span id="ms"></span> real milliseconds</p>

获取触摸事件的长度

Get length of touchevent

html

javascript

touch

cordova