Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to achieve the long press event effect in html5 related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this article on how to achieve long press event effect in html5, let's take a look.

Recently received a request to long press a label to delete a suspended delete button. This requirement is actually very common on app, but on mobile H6, we don't have a long press event, so we need to simulate this event ourselves.

Ps: in order to make a gif and app, I have to send it to the computer by email. I have a headache.

Train of thought

Abandon the click event and decide whether to click or press long by judging the length of time you press.

Using touchstart and touchend events

Start a timer in touchstart, such as displaying a long-press menu after 700ms

Clear this timer in touchend so that if you press longer than 700ms, the long press menu is already displayed, and the clear timer will not have any effect; if the press time is less than 700ms, the long press menu in touchstart is cleared before it can be displayed.

From this we can realize the simulated long press event.

Upper code

Please focus on JS. The complete code is posted here to make it easier for everyone to read it carefully. The code can be copied to see the effect directly.

Most of the css only beautifies the style and hides the delete button at first.

HTML:

Document long press me to delete

JS

Let timer = nulllet 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) {/ / handle click event 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; 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,0.7) transparent transparent transparent; position: absolute; bottom:-9px; left: 50%; transform: translateX (- 50%);}

Ps: touchstart and touchend are only useful on mobile devices. To see code examples, please:

Use chrome

F12 opens the timing window

Switch to analog mobile device

This is the end of the article on "how to achieve long-press event effect in html5". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to achieve long-press event effect in html5". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.