H5点击触摸测试，点击延迟测试，点击触摸时长测试案例_点击事件测试

为得到触摸事件在手机端等触摸设备的详细数据，现在开发的触摸测试案例将实现此功能。

应用场景，将可得到模拟人点击的具体触摸时间、坐标等信息。

预览效果：https://codepen.io/nick_code/pen/eYpLjeK

触摸设备触摸面板得到将得到展示的触摸信息

HTML

<div class="box" id="box">
  <div id="info">xxx</div>
</div>

CSS

.box{
  width: 300px;
  height: 300px;
  background-color: #e9e9e9;
  border: 1px solid black;
}

JS

let boxEl = document.getElementById('box')
boxEl.addEventListener('touchstart', touchstart, false);
boxEl.addEventListener('touchmove', touchmove, false);
boxEl.addEventListener('touchend', touchend, false);
 
let press = {
  startTime: null,
  endTime: null,
  startX: 0,
  startY: 0,
  endX: 0,
  endY: 0
}
function touchstart(event){
  console.log('event', event)
  press.startTime = new Date().getTime()
  press.startX = event.touches[0].clientX
  press.startY = event.touches[0].clientY
  press.endX = null
  press.endY = null
  // setInfo(event.touches[0].clientX)
}
function touchmove(event){
  press.endX = event.touches[0].clientX
  press.endY = event.touches[0].clientY
}
function touchend(event){
  press.endTime = new Date().getTime()
  setInfo(event)
}
function setInfo(x){
  let html = `
    开始：${press.startTime}<br/>
    结速：${press.endTime}<br/>
    耗时：${press.endTime-press.startTime}<br/>
    开始坐标：${press.startX},${press.startY}<br/>
    结束坐标x：${press.endX},${press.endY}<br/>
  `
  document.getElementById('info').innerHTML = html
}
setTimeout(function(){
  $('#info').trigger('mousedown')
  $('#info').trigger('mouseup')
}, 1000)