点击延迟_300ms 延迟是什么，如何解决
先看一下測試代碼
<body><div id="delay">click有延遲 </div><div id="no-delay">touchstart無延遲</div><div> <a id="link1" href="#1">鏈接1</a> <a id="link2" href="#2">鏈接1</a></div><div id="log"></div> <!-- 方便手機調試 --><style>body {font-size: 60px;}</style><script>const $ = s => document.querySelector(s)const log = str => $('#log').innerText = str let t1, t2$('#delay').ontouchstart = e => { //記錄時間t1 = Date.now()}$('#delay').onclick = e => { //先觸發ontouchstart，再 ontouchend，最后觸發 click log(Date.now() - t1) //click 執行時，和 ontouchstart 差多少時間，用 log 展示到頁面上}$('#no-delay').ontouchstart = e => {log('touchstart無延遲') //ontouchstart 直接輸出}$('#link1').ontouchstart = e => {t2 = Date.now() //點鏈接1時，hash 會切換，}$('#link2').ontouchstart = e => {t2 = Date.now() //點鏈接2時，hash 會切換，}window.onhashchange = () => { //調用 onhashchange ，現在的時間減去觸摸的時間log(`link ${location.hash} : ${Date.now() - t2}ms`)}</script> </body>點擊 '#delay' 元素時，首先觸發的是 ontouchstart ，再觸發 onclick，中間是有大約 300ms 的延遲時間
同樣，點擊 '#link1' 元素時，url 的變化，也是有 300ms 的延遲時間
這就是所謂的在移動端有 300ms 延遲（在手機端可能會是 400ms 這個不確定）
延遲的原因
以前的網頁全都是適配的 PC 瀏覽器，全都是給 PC 看的，這個頁面放到手機上，用起來就會不方便，為了方便用戶快速的去縮放頁面，Iphone 引入了雙擊縮放功能，提高用戶體驗，但是問題來了，當我在屏幕上點擊一個元素時，瀏覽器怎么知道我是單擊還是雙擊，它會立刻跳轉去響應呢，還是等著雙擊，所以此時瀏覽器只能等，在300ms 以內，如果沒有下一次點擊，瀏覽器認為是點擊不是雙擊，不需要頁面縮放，去響應點擊事件，在 300ms 以內，又點擊了一次，表示此操作是雙擊（而不是跳轉或事件單擊），做了頁面縮放，瀏覽器必須等 300ms ，才能知道用戶的真實行為，對于普通的事件響應，只有 300ms 后才知道，所以延時 300ms , 其他設備瀏覽器也開始模仿 iphone（iphone是無鍵盤全觸屏手機的始祖）
現在是 9102 年了，大部分瀏覽器都沒有此設置了，也就沒有延遲的問題了。不過還是可以了解下具體的解決方案。
如何解決呢
方法1：在 ios android 都會生效，必須 width = device-width ，若設置為 width = 800px , android 生效，ios 不生效，所以不能寫其他值
<meta name="viewport" content="width=device-width">延遲會消失（其實沒有消失，只不過延遲時間變短了）
為什么還會有 73ms 的延遲呢
正常情況下，用戶點擊 'click 有延遲' 時，再松開，是有時間的（可能幾十毫秒），會觸發 touchstart , touchmove, touchend, touchstart 和 touchend 之間是有時差的，touchend 之后，click 事件才會觸發。這個時間不是設備故意設置的 300ms 了，
方法2：使用 fastclick 庫，或者不用click用touchstart
若使用 touchstart ，可能拖拽縮放是有問題的，比如手指一觸碰就會響應... 而且沒有按下的效果（體驗差）
fastclick 的使用及原理
- 若定義meta 時，width 是其他值時，還是存在延遲問題
- 2017年以前，很多機型不支持 meta
所以此時需要 fastclick
如何使用
引入
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>然后加上
<script>document.addEventListener('DOMContentLoaded', function () {FastClick.attach(document.body)}, false)</script>原理
正常情況下，用戶 touchstart touchmove touchend 之后，300ms 后，會觸發 click 事件
在檢測到 touchend 事件的時候，會通過DOM自定義事件立即出發模擬一個click事件，然后立即去響應，并把瀏覽器在300ms之后真正的click事件阻止掉
具體實現
const FastClick = (function () {function attach(root) {let targetElement = nullroot.addEventListener('touchstart', function () {targetElement = event.target})root.addEventListener('touchend', function (event) {event.preventDefault()let touch = event.changedTouches[0]let clickEvent = document.createEvent('MouseEvents')clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null)clickEvent.forwardedTouchEvent = truetargetElement.dispatchEvent(clickEvent)})}return { attach } })()FastClick.attach(document.body)總結
以上是生活随笔為你收集整理的点击延迟_300ms 延迟是什么，如何解决的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： axis2 jar包冲突_一个jar包冲
- 下一篇： weblogic中ssrf漏洞修复_We