Mobile HTML5 simulates long press delete event (with code)

The content of this article is about the mobile HTML5 simulated long press deletion event (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Why I wrote this article

I recently received a request to long press a label to display a floating delete button. This requirement is actually very common on apps, but in mobile h5, we don’t have a long press event, so we need to simulate this event ourselves.

The approximate effect is as follows:

Idea

• Abandon the click event and pass judgment The duration of the press determines whether to click or long press

• Use touchstart and touchend events

• Start a timer in touchstart, such as A long press menu will be displayed after 700ms

• Clear this timer in touchend, so that if the press time exceeds 700ms, the long press menu will already be displayed, and clearing the timer will not has any impact; if the pressing time is less than 700ms, the long press menu in touchstart will be cleared before it can be displayed.

From this we can implement simulated long press events.

Upload the code

HTML:

        
  
 
长按我
 
删除
 
   

JS

let timer = null let startTime = '' let endTime = '' const label = document.querySelector('.label') const deleteBtn = document.querySelector('.delete_btn') label.addEventListener('touchstart', function () { startTime = +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; 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: absolute; 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 and touchend are only useful on mobile devices. If you want to see code examples, please:

• Use chrome

• F12 Open the time adjustment window

• Switch to the simulated mobile device

Click on the picture below:

The above is the detailed content of Mobile HTML5 simulates long press delete event (with code). For more information, please follow other related articles on the PHP Chinese website!