¿Por qué escribir este artículo?
Recientemente recibí una solicitud para mostrar y eliminar un botón de eliminación flotante presionando prolongadamente una etiqueta determinada. En realidad, este requisito es muy común en las aplicaciones, pero en el móvil h5 no tenemos un evento de pulsación prolongado, por lo que debemos simular este evento nosotros mismos.
El efecto aproximado es el siguiente:
PD: Para hacer un gif, descargué la aplicación y tuve que enviarla a la computadora por correo electrónico. Me duele la cabeza. .
IdeasA partir de esto podemos implementar eventos de prensa largos simulados.
código arriba 请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果
La mayor parte del CSS es solo para embellecer el estilo e inicialmente ocultar el botón Eliminar.
HTML:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho-dispositivo, escala-inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=es decir=edge> <título>Documento</título> <enlace rel=hoja de estilo tipo=texto/css href=./longpress.css /></head><body> <div class=container> <div class=label id=label>Mantén pulsada la tecla</div> <div class=delete_btn>Eliminar</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', function () { startTime = +nuevo temporizador Fecha() = setTimeout(función () {eliminarBtn.style.display = 'bloquear' }, 700)})label.addEventListener('touchend', function () { endTime = +new Date() clearTimeout(timer) if (endTime - startTime < 700) { // Manejar eventos de clic label.classList.add('selected' ) }})CSS
.container {posición: relativa; visualización: bloque en línea; margen superior: 50 px;}. etiqueta {pantalla: bloque en línea; tamaño del cuadro: ancho del borde: 105 px; ; color de fondo: #F2F2F2; color: #5F5F5F; alineación de texto: centro; radio de borde: 3px; tamaño de fuente: 14px;}.label.selected {color de fondo: #4180cc; color: blanco;}.delete_btn {pantalla: ninguna; posición: absoluta; izquierda: 50%; 50%) traducirY(-100%); color: blanco; relleno: 10px 16px; color de fondo: rgba(0, 0, 0, .7); radio de borde: 6px; altura de línea: 1; espacio en blanco: nowrap; tamaño de fuente: 12px;}.delete_btn::after { ancho: 0; ancho de borde: 5px; estilo de borde: sólido; color de borde: rgba (0, 0, 0, .7) transparente transparente posición: absoluta; -9px; izquierda: 50%; transformar: traducirX(-50%);}PD: touchstart y touchend solo son útiles en dispositivos móviles. Si desea ver ejemplos de código, por favor:
Es decir, haga clic en la imagen a continuación:
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.