Página Inicial>Tutorial de web design>Tutorial HTML

Método de implementação de simulação de evento de pressionamento longo em HTML5 em terminal móvel

Autor：Eve Cole Data da Última Atualização：2025-01-18 17:24:01

Por que escrever este artigo

Recentemente, recebi uma solicitação para exibir e excluir um botão de exclusão flutuante pressionando longamente um determinado rótulo. Na verdade, esse requisito é muito comum em aplicativos, mas no mobile h5 não temos um evento de pressionamento longo, então precisamos simular esse evento nós mesmos.

O efeito aproximado é o seguinte:

ps: Para fazer um gif, baixei o aplicativo e tive que enviar para o computador por e-mail. Minha cabeça dói. .

Ideias

  • Desista do evento de clique e decida se deseja clicar ou pressionar longamente, julgando a duração do pressionamento.
  • Usando eventos touchstart e touchend
  • Inicie um cronômetro no touchstart, como exibir um menu de toque longo após 700 ms
  • Limpe este cronômetro no touchend, de modo que se o tempo de pressionamento exceder 700 ms, o menu de toque longo será exibido e a limpeza do cronômetro não terá nenhum efeito se o tempo de pressionamento for inferior a 700 ms, então o menu de toque longo no touchstart; Foi apagado antes que pudesse ser exibido.

A partir disso podemos implementar eventos simulados de pressão longa.

Código para cima

请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果

A maior parte do CSS é apenas para embelezar o estilo e inicialmente ocultar o botão de exclusão.

HTML: 

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Documento</title> <link rel=stylesheet type=text/css href=./longpress.css /></head><body> <div class=container> <div class=label id=label>Pressione-me e segure</div> <div class=delete_btn>Excluir</div> </div> <script src= ./longpress.js></script></body></html>

JS 

 deixe timer = nulllet startTime = ''let endTime = ''const label = document.querySelector('.label')const deleteBtn = document.querySelector('.delete_btn')label.addEventListener('touchstart', function () { startTime = + novo temporizador Date() = setTimeout(function () { deleteBtn.style.display = 'block' }, 700)})label.addEventListener('touchend', function () { endTime = +new Date() clearTimeout(timer) if (endTime - startTime < 700) { // Lidar com eventos de clique label.classList.add('selected' ) }})

CSS 

 .container {posição: relativo; display: bloco embutido: 50px;}.label {altura da linha: 32px; ; cor de fundo: #F2F2F2; cor: #5F5F5F; alinhamento do texto: centro da borda: 3px; font-size: 14px;}.label.selected { background-color: #4180cc; color: white;}.delete_btn { display: none; 50%) traduzirY(-100%); cor: branco; preenchimento: 10px 16px; 0, 0,7); raio da borda: 6px; altura da linha: 1; espaço em branco: tamanho da fonte: 12px;}.delete_btn::after { conteúdo: ''; largura da borda: 5px; estilo da borda: sólido; cor da borda: rgba (0, 0, 0, 0,7) transparente transparente posição: absoluto; -9px; esquerda: 50%; transformar: traduzirX(-50%);}

ps: touchstart e touchend são úteis apenas em dispositivos móveis. Se você quiser ver exemplos de código, por favor:

  1. usar cromo
  2. F12 abre a janela de ajuste de tempo
  3. Mudar para dispositivo móvel simulado

Ou seja, clique na imagem abaixo:

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.

Artigos Relacionados