前段时间看到有人说现在手机端click事件已经没有300ms延迟了，然后我写了一个小dome试了一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#container {
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
;(function() {
const container = document.getElementById('container')
container.addEventListener('touchstart', function() {
console.time('点击')
})
container.addEventListener('click', function() {
console.timeEnd('点击')
})
})()
</script>
</body>
</html>
写了一个绿色的小方块，在这个小方块上监听touchstart和click事件，
在touchstart里，开始计时
触发click后计时结束，
我打开Chrome的开发者工具，模拟手机端，
发现50-60ms后就触发了click事件，确实没有300ms延迟，
然后又在安卓手机和iPhone上分别试了一下，也没有延迟
有一个关键点在于 viewport
如果我把viewport去掉
变成这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <meta name="viewport" content="width=device-width" /> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#container {
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
;(function() {
const container = document.getElementById('container')
container.addEventListener('touchstart', function() {
console.time('点击')
})
container.addEventListener('click', function() {
console.timeEnd('点击')
})
})()
</script>
</body>
</html>
这时候，触发click的时间就是300ms
我做的实验不太全面，有兴趣的小伙伴可以试一试
网友评论