모바일 HTML5는 길게 누르기 삭제 이벤트를 시뮬레이션합니다(코드 포함).-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

모바일 HTML5는 길게 누르기 삭제 이벤트를 시뮬레이션합니다(코드 포함).

不言

Sep 30, 2018 pm 03:27 PM

html5

본 글의 내용은 모바일 HTML5 길게 누르기 삭제 이벤트(코드 포함)에 관한 내용입니다. 참고가 필요한 친구들이 참고하시면 좋을 것 같습니다.

이 글을 쓴 이유

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

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

모바일 HTML5는 길게 누르기 삭제 이벤트를 시뮬레이션합니다(코드 포함).

Idea

클릭 이벤트를 중단하고 누르는 시간을 판단하여 클릭할지 길게 누를지 결정하세요
터치스타트, 터치엔드 이벤트를 활용하세요
In touchstart 터치엔드에서 타이머를 시작합니다. 예를 들어 길게 누르기 메뉴는 700ms 후에 표시됩니다.
터치엔드에서 이 타이머를 지우므로 누르는 시간이 700ms를 초과하면 길게 누르기 메뉴가 이미 표시됩니다. 타이머를 지워도 아무런 영향을 미치지 않습니다. 누르는 시간이 700ms 미만인 경우 터치스타트의 길게 누르기 메뉴가 표시되기 전에 지워집니다.

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

코드 업로드

모든 사람이 자세히 살펴볼 수 있도록 전체 코드가 여기에 게시되어 있습니다. 코드를 복사하여 직접 확인할 수 있습니다.
대부분의 CSS는 스타일을 아름답게 하기 위한 것입니다. 시작 부분도 있습니다. 삭제 버튼 숨기기

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./longpress.css" />
</head>
<body>
    <div>
        <div id="label">长按我</div>
        <div>删除</div>
    </div>
    <script src="./longpress.js"></script>
</body>
</html>

JS

let timer = null
let startTime = &#39;&#39;
let endTime = &#39;&#39;
const label = document.querySelector(&#39;.label&#39;)
const deleteBtn = document.querySelector(&#39;.delete_btn&#39;)

label.addEventListener(&#39;touchstart&#39;, function () {
  startTime = +new Date()
  timer = setTimeout(function () {
    deleteBtn.style.display = &#39;block&#39;
  }, 700)
})

label.addEventListener(&#39;touchend&#39;, function () {
  endTime = +new Date()
  clearTimeout(timer)
  if (endTime - startTime < 700) {
    // 处理点击事件
    label.classList.add(&#39;selected&#39;)
  }
})

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: &#39;&#39;;
    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 및 touchend는 모바일 장치에서만 유용합니다. 코드 예제를 보려면 다음을 참조하세요.

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

아래 사진을 클릭하세요:

모바일 HTML5는 길게 누르기 삭제 이벤트를 시뮬레이션합니다(코드 포함).

위 내용은 모바일 HTML5는 길게 누르기 삭제 이벤트를 시뮬레이션합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 segmentfault思否에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

H5 이해 : 의미와 중요성May 11, 2025 am 12:19 AM

H5는 HTML의 다섯 번째 버전 인 HTML5입니다. HTML5는 웹 페이지의 표현력과 상호 작용성을 향상시키고 시맨틱 태그, 멀티미디어 지원, 오프라인 스토리지 및 캔버스 드로잉과 같은 새로운 기능을 소개하며 웹 기술 개발을 촉진합니다.

H5 : 접근성 및 웹 표준 준수May 10, 2025 am 12:21 AM

웹 사이트에는 접근성 및 네트워크 표준 준수가 필수적입니다. 1) 접근성은 모든 사용자가 웹 사이트에 동등하게 액세스 할 수 있도록 보장합니다. 2) 네트워크 표준은 웹 사이트의 접근성 및 일관성을 향상시키기 위해, 3) 접근성은 시맨틱 HTML, 키보드 내비게이션, 색상 대비 및 대체 텍스트를 사용해야합니다.

HTML의 H5 태그는 무엇입니까?May 09, 2025 am 12:11 AM

HTML의 H5 태그는 작은 타이틀 또는 하위 타이틀을 태그하는 데 사용되는 5 레벨 타이틀입니다. 1) H5 태그는 컨텐츠 계층을 개선하고 가독성과 SEO를 개선하는 데 도움이됩니다. 2) CSS와 결합하여 스타일을 사용자 정의하여 시각적 효과를 향상시킬 수 있습니다. 3) 학대를 피하고 논리적 컨텐츠 구조를 보장하기 위해 H5 태그를 합리적으로 사용하십시오.

H5 코드 : 웹 구조에 대한 초보자 안내서May 08, 2025 am 12:15 AM

HTML5에서 웹 사이트를 구축하는 방법에는 다음이 포함됩니다. 1. 의미 태그를 사용하여 웹 페이지 구조를 정의하는 등; 2. 멀티미디어 컨텐츠, 사용 및 태그를 포함; 3. 양식 검증 및 로컬 스토리지와 같은 고급 기능을 적용하십시오. 이 단계를 통해 명확한 구조와 풍부한 기능을 갖춘 최신 웹 페이지를 만들 수 있습니다.

H5 코드 구조 : 가독성을위한 컨텐츠 구성May 07, 2025 am 12:06 AM

합리적인 H5 코드 구조를 사용하면 페이지가 많은 컨텐츠 중에서 눈에 띄게 나타납니다. 1) 구조를 명확하게하기 위해 컨텐츠를 구성하려면 시맨틱 레이블 등을 사용하십시오. 2) Flexbox 또는 그리드와 같은 CSS 레이아웃을 통해 다른 장치에 대한 페이지의 렌더링 효과를 제어하십시오. 3) 반응 형 디자인을 구현하여 페이지가 다른 화면 크기에 맞게 조정되도록하십시오.

H5 대 구형 HTML 버전 : 비교May 06, 2025 am 12:09 AM

HTML5 (H5)와 이전 버전의 HTML의 주요 차이점은 다음과 같습니다. 1) H5는 시맨틱 태그를 소개하고, 2) 멀티미디어 컨텐츠를 지원하며 3) 오프라인 스토리지 기능을 제공합니다. H5는 새로운 태그 및 API (예 : 및 태그)를 통해 웹 페이지의 기능과 표현성을 향상시켜 사용자 경험 및 SEO 효과를 향상 시키지만 호환성 문제에주의를 기울여야합니다.

H5 vs. HTML5 : 용어와 관계를 명확하게합니다May 05, 2025 am 12:02 AM

H5和HTML5的区别在于：1）HTML5是网页标准，定义结构和内容；2）H5是基于HTML5的移动网页应用，适用于快速开发和营销。

HTML5 기능 : H5의 핵심May 04, 2025 am 12:05 AM

HTML5의 핵심 기능에는 시맨틱 태그, 멀티미디어 지원, 양식 향상, 오프라인 스토리지 및 로컬 스토리지가 포함됩니다. 1. 코드 가독성 및 SEO 효과 향상과 같은 시맨틱 태그. 2. 멀티미디어 지원은 미디어 컨텐츠 및 태그를 포함하는 프로세스를 단순화합니다. 3. 양식 향상은 새로운 입력 유형 및 검증 특성을 도입하여 양식 개발을 단순화합니다. 4. 오프라인 스토리지 및 로컬 스토리지는 ApplicationCache 및 LocalStorage를 통해 웹 페이지 성능 및 사용자 경험을 향상시킵니다.

See all articles