為啥寫這篇文章
最近接了個需求，要求長按某個標籤顯示刪除一個懸浮的刪除按鈕。這個需求其實在app上很常見，但在行動端h5中，我們沒有長按的事件，所以就需要自己模擬這個事件了。
大概效果如下：
ps: 為了做個gif還下了app，還得透過郵件寄到電腦上，腦瓜會痛。 。
思路由此我們可以實現模擬的長按事件了。
上程式碼请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果
css大部分只是做了樣式的美化，還有一開始讓刪除按鈕隱藏起來
HTML:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</title> <link rel=stylesheet 型=text/css href=./longpress.css /></head><body> <div class=container> <div class=label id=label>長按我</div> <div class=delete_btn>刪除</div> < /div> <script src=./longpress.js></script></body></html>
JS
let timer = nulllet startTime = ''let endTime = ''const label = document.querySelector('.label')const deleteBtn = document.querySelector('.delete_btn')label.addEventListener('touchstart', fstart = +new Date() timer = setTimeout(function () { deleteBtn.style.display = 'block' }, 700)})label.addEventListener('touchend', function () { endTime = +new Date() clearTimeout(timer) if (endTime - startTime < 700) { // 處理點選事件label.classList.add('selected') }})CSS
.container { position: relative; display: inline-block; margin-top: 50px;}.label { display: inline-block; box-sizing: border-box; width: 105px; height: 32px; border-box; width: 105px; height: 32px; line-height: 32px ; background-color: #F2F2F2; color: #5F5F5F; text-align: center; border-radius: 3px; font-size: 14px;}.label.selected { background-color: #4180cc; color: white;}.delete_btn { display: none; position: solute; top: -8px; left: 50%; transform: translateX(-50%) translateY(-100%); color: white; padding: 10px 16px; background-color: rgba(0, 0, 0, .7); border-radius: 6px; line-height: 1; white-space: nowrap; font-size: 12px;}.delete_btn::after { content: ''; width: 0; height: 0; border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, .7) transparent transparent transparent; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);}ps: touchstart和touchend只有在行動端裝置上才有用，如果要看程式碼範例的話請:
即點擊如下圖:
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。