모바일 단말에서 HTML5로 길게 누르기 이벤트를 시뮬레이션하는 구현 방법

저자：Eve Cole 업데이트 시간：2025-01-18 17:24:01

이 글을 쓰는 이유

최근 특정 라벨을 길게 눌러 플로팅 삭제 버튼을 표시하고 삭제해 달라는 요청을 받았습니다. 이 요구 사항은 실제로 앱에서는 매우 일반적이지만 모바일 h5에서는 길게 누르기 이벤트가 없으므로 이 이벤트를 직접 시뮬레이션해야 합니다.

대략적인 효과는 다음과 같습니다.

ps: gif를 만들려면 앱을 다운받아서 이메일로 컴퓨터로 보내야 해서 머리가 아팠어요. .

아이디어

클릭 이벤트를 포기하고 누르는 시간을 판단하여 클릭할지 길게 누를지 결정합니다.
touchstart 및 touchend 이벤트 사용
700ms 후에 길게 누르기 메뉴를 표시하는 등 터치스타트에서 타이머를 시작합니다.
터치엔드에서 이 타이머를 지워서 누르는 시간이 700ms를 초과하면 길게 누르기 메뉴가 표시되고 누르는 시간이 700ms보다 작으면 터치스타트에서 길게 누르기 메뉴가 작동하지 않습니다. 표시되기 전에 삭제되었습니다.

이를 통해 시뮬레이션된 길게 누르기 이벤트를 구현할 수 있습니다.

업코드

请把重点放在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 -호환 가능한 콘텐츠=ie=edge> <title>문서</title> <link rel=stylesheet type=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>

 let 타이머 = nulllet startTime = ''let endTime = ''const label = document.querySelector('.label')const deleteBtn = document.querySelector('.delete_btn')label.addEventListener('touchstart', function () { startTime = +new Date() 타이머 = 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 { 위치: 상대; 디스플레이: 인라인 블록; 여백: 50px;}.label { 디스플레이: 인라인 블록; 테두리-상자; 너비: 32px; ; 배경색: #F2F2F2; 색상: #5F5F5F; 테두리 반경: 3px; 글꼴 크기: 14px;}.label.selected { 배경색: #4180cc; 색상: 흰색;}.delete_btn { 표시: 없음; 상단: -8px; 변환X(- 50%) 번역Y(-100%); 색상: 흰색; 패딩: 10px 16px; rgba(0, 0, 0, .7); 테두리 반경: 6px; 공백: nowrap;}.delete_btn::after { 내용: ''; 테두리 너비: 5px; 테두리 스타일: 단색; 테두리 색상: rgba(0, 0, 0, .7) 투명 투명 투명; -9px; 왼쪽: 50%; 변환: X(-50%);}

ps: touchstart 및 touchend는 모바일 장치에서만 유용합니다. 코드 예제를 보려면 다음을 수행하세요.

크롬을 사용하다
F12는 시간 조정 창을 엽니다.
시뮬레이션된 모바일 장치로 전환

즉, 아래 이미지를 클릭하세요.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.