为得到触摸事件在手机端等触摸设备的详细数据,现在开发的触摸测试案例将实现此功能。
应用场景,将可得到模拟人点击的具体触摸时间、坐标等信息。
预览效果:https://codepen.io/nick_code/pen/eYpLjeK
触摸设备触摸面板得到将得到展示的触摸信息
![触摸信息示例](https://img-blog.csdnimg.cn/20200520152123316.png)
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)