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)

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值